是否可以使用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插件。