如何裁剪图像边缘
How to crop an image edge
我想裁剪图像边缘以将其设置为透明。当背景颜色为白色时,我使用 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);
}
图片。
我找到了一个 jquery 插件调用 polycrop。您只需要在页面中添加 jquery 并在元素(您要裁剪的图像)中添加 polyclip 属性。
<img src="http://lorempixel.com/200/150/people/1/Nishan/"
data-polyclip="0,0,199,0,199,151,50,150,0,97">
就是这样!
裁剪后的图片是这样的
jsfiddle 示例:http://jsfiddle.net/rb73hc53/
我想裁剪图像边缘以将其设置为透明。当背景颜色为白色时,我使用 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);
}
图片。
我找到了一个 jquery 插件调用 polycrop。您只需要在页面中添加 jquery 并在元素(您要裁剪的图像)中添加 polyclip 属性。
<img src="http://lorempixel.com/200/150/people/1/Nishan/"
data-polyclip="0,0,199,0,199,151,50,150,0,97">
就是这样!
裁剪后的图片是这样的
jsfiddle 示例:http://jsfiddle.net/rb73hc53/