首页 >
css图片某种颜色透明 |css3的过渡
p标签：
CSS中有一个非常实用的属性——opacity，可以设置元素的不透明度。但是有时候大家需要将图片中的某一颜色去掉，实现这个效果，需要使用opacity的替代方法——background-clip。
background-clip属性可以设置背景图片在哪个位置被裁剪，常用的有border-box、padding-box和content-box。当background-clip值为content-box时，背景图片将被裁剪在内容框的外面，也就是图片边框的外面。这个属性还可以与background-color属性一起使用来设置图片的某种颜色透明。
pre标签：
pre {
background-color: #f9f9f9;
padding: 8px;
border: 1px solid #ccc;
}
img {
background-color: blue;
-webkit-background-clip: content-box;
-moz-background-clip: content-box;
background-clip: content-box;
}
上面的代码中，大家将一个pre元素和一个图片元素进行了设置。在图片元素中，大家将背景颜色设置为蓝色，并使用background-clip属性将背景图片裁剪在内容框外面，也就是图片边框外面。这样，图片边框内的蓝色部分就被裁剪掉了，实现了将图片中的颜色透明的效果。
需要注意的是，使用background-clip属性实现透明效果时，背景图片必须是不透明的，否则透明区域会显示为透视的背景色。并且该属性只适用于webkit和moz内核的浏览器，其他浏览器暂不支持。