我真正需要的是创建一种轮廓,以便所有非透明像素都应用了它们.在这种情况下,黑色.
之前和之后应该看起来像这样：
请注意,两个图像都具有透明背景.
是否有可用于使用CSS执行此操作的方法？
如果没有,是否有一种简单的方法来生成剪影并在客户端,在网页上下文中切换两个图像？可以假设现代浏览器.
非常感谢任何形式的帮助.
解决方法
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/
请注意07001.要支持IE,您可以将其设置为背景图像并在悬停时更改它.
使用两个图像以获得更好的浏览器兼
如果您愿意使用两个图像,只需在悬停时交换图像,即可通过更广泛的浏览器支持获得相同的效果.像这样的东西：
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-blue/
