我们可以将黑白图像转换为CSS反转效果

时间:2014-07-16 17:24:44

标签: css image css3

我希望为黑白图像添加一个很酷的效果,其中悬停时颜色变为白色黑色,白色部分变为黑色,黑色变为白色。

我知道一种使用图像悬停效果的方法,通过添加具有所需颜色效果的第二个相似图像,当有人悬停第二个图像时,我想知道我们是否可以通过使用CSS过滤器来实现。对于第一张图像,我使用了灰度css滤镜,但我想知道是否有另一种效果可以将灰度效果中的黑白颜色反转为白色和黑色。提前谢谢了。 :)

1 个答案:

答案 0 :(得分:6)

使用CSS进行此操作的最佳方法是将GC-B中提到的灰度和反转属性链接在一起,就像这样 -

-webkit-filter: grayscale(1) invert(1);
filter: grayscale(1) invert(1);