透明的CSS图像区域
我感兴趣的是动态修改背景透明的图片，并使用CSS实现。
我真正需要的是创建一种轮廓，以便所有不透明的像素都应用颜色。 在这种情况下，黑色。
之前和之后应该看起来像这样：
注意这两个图像都有一个透明背景。
有没有一种方法可以用来执行这个使用CSS？
如果没有，有没有一种简单的方法来生成剪影，并在网页上下文中在客户端的两个图像之间切换？ 现代浏览器可以被假定。
任何形式的帮助，不胜感激。
使用webkit过滤器可以实现这样的效果：
img {
-webkit-filter: grayscale(100%);
-webkit-filter: contrast(0%);
-webkit-filter: brightness(0%);
}
img:hover {
-webkit-filter: grayscale(0%);
-webkit-filter: contrast(100%);
-webkit-filter: brightness(100%);
}
和一个jsfiddle来演示：http://jsfiddle.net/7Ljcgj79/
请注意，这种方法不支持所有浏览器。 为了支持IE，你可以将其设置为background-image并在悬停时进行更改。
使用两个图像更好地浏览器兼容性
如果您愿意使用两张图片，则只需在hover交换图片，即可通过更广泛的浏览器支持实现相同的效果。 像这样的东西：
div {
height: 400px;
width: 400px;
background-image: url('http://i.stack.imgur.com/Pmz7l.png');
background-repeat: no-repeat;
}
div:hover {
background-image: url('http://i.stack.imgur.com/gZw5u.png');
}
并更新小提琴：http://jsfiddle.net/7Ljcgj79/2/
改进的示例支持所有颜色
我一段时间没有访问过这篇文章，现在我确定看到它可以得到改进（我所要做的就是将亮度设置为0％，没有其他必要，实际上没有效果）。 尽管如此，我想给出一个更新的答案，以回应评论。 此解决方案需要多一点工作，但支持所有颜色，而不仅仅是黑色！ 以下是重要的一点：
HTML
<svg>
<filter id="monochrome" color-interpolation-filters="sRGB">
<!-- change last value of first row to r/255 -->
<!-- change last value of second row to g/255 -->
<!-- change last value of third row to b/255 -->
<feColorMatrix type="matrix"
values="0 0 0 0 0.6588
0 0 0 0 0.4745
0 0 0 0 0.1686
0 0 0 1 0" />
</filter>
</svg>
CSS
img {
-webkit-filter: url(#monochrome);
filter: url(#monochrome);
}
img:hover {
filter: none;
}
并更新小提琴：http://jsfiddle.net/7Ljcgj79/16/
这种技术利用了<fecolormatrix> ，这基本上是用于定义自己的过滤器的高级功能。 我在这里做的是将所有的颜色通道降到零（前四列全部为零），然后添加我需要的常量值（这是最后一列）。 确保在你的<filter>标签中有type="matrix" ，并且在你的<fecolormatrix>设置color-interpolation-filters="sRGB"否则它会以不同的方式解释你的矩阵。
如果您想了解更多信息，这些帖子非常有用：https://alistapart.com/article/finessing-fecolormatrix和https://css-tricks.com/color-filters-can-turn-your-gray-skies-蓝色/
你需要的是两件事：
filter属性。 HTML
<img src="http://www.iceni.com/blog/wp-content/uploads/2013/08/EBay_logo.png">
CSS
img{
-webkit-filter: drop-shadow(20px 0px 2px rgb(0,0,0));
filter: url(#drop-shadow);
-ms-filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=12, OffY=12, Color='#000')";
filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=12, OffY=12, Color='#000')";
}
这里是一个JSFiddle
链接地址: http://www.djcxy.com/p/89321.html