Html 如何裁剪图像边缘

我想裁剪图像边缘以设置边缘透明度。我使用png设置背景色为白色时的边缘。但当它用于其他背景时，白色的边缘就存在了。所以我想知道如何裁剪图像边缘。 这是样式的CSS

 .cover-left-2 .avatar:after {
   width: 38px;
   height: 22px;
   background-position: -47px bottom;
 }

.avatar:after {
   content: " ";
   display: block;
   position: absolute;
   left: 0;
   bottom: 0;
   opacity: 0.9;
   filter: alpha(opacity=80);
   pointer-events: none;
   background: url(../img/photo-corner-sw.png) no-repeat left bottom;
   background-image: url(../img/photo-corner-sw.svg);
}

形象

---

我找到了一个名为polycrop的jquery插件。您只需要将jquery添加到页面中，并将polyclip属性添加到元素（要裁剪的图像）中

就这样

裁剪后的图像如下所示

JSFIDLE示例：

 <img src="http://lorempixel.com/200/150/people/1/Nishan/" 
        data-polyclip="0,0,199,0,199,151,50,150,0,97">