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

Question

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

Answer 1

您可以使用 filter:

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

如果您有黑白图像，则只使用 invert(1) 而不是 grayscale(1) invert(1)。

您也可以像这样对 ie 使用反向过滤器：

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

有关更多浏览器兼容性，请参阅此 gist or jQuery.BlackAndWhite 插件。

Answer 2

你有 filter 属性:

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

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