是否可以使用css反转黑白图像？

Question

我有一个黑白图像，我只需要该图像的反色（黑色代替白色和白色，而不是黑色）。我知道它可以用图像编辑器完成，有没有可能用css来处理它？是否有任何CSS属性可用于反转黑白图像？

Answer 1

你有filter属性：

.yourImage{ 
    -webkit-filter: invert(100%); /* Safari/Chrome */ 
    filter: invert(100%); 
} 

这将反转的颜色，而不是简单地使图像的黑色和白色。

Answer 2

您可以使用filter：

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

或者只是使用invert(1)而不是grayscale(1) invert(1)，如果你有黑色和白色图像。

您还可以使用倒置过滤器即是这样的：

filter: progid:DXImageTransform.Microsoft.BasicImage(invert=1); 
zoom: 1; 

更多浏览器的兼容性，请参阅本gist或jQuery.BlackAndWhite插件。