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

【问题标题】：is it possible to invert an black and white image using css?是否可以使用 css 反转黑白图像？
【发布时间】：2023-04-02 03:13:01
【问题描述】：

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

【问题讨论】：

【解决方案1】：

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

【讨论】：

【解决方案2】：

您拥有filter 属性：

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

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

【讨论】：