Question

我有一个带有一堆png图标的网站，它们都是黑白图像 - 白色背景上的黑色徽标。

此刻我们有一个悬停效果，隐藏第一个png并显示倒置png，此时我们正在导出2个图像：1）白色背景上的黑色徽标，2）来自photoshop的背景上的白色徽标。

这让我觉得有可能用JS或甚至新时代的CSS反转png文件吗？

（通过倒置我的意思是交换黑色为白色，反之亦然白色为黑色的图像）

不幸的是，这些是第三方图片，我有.png文件，如果我把它们作为.svg我知道我可以在运行中反转.svg＆＃39;。

Answer 1

是使用来自css的过滤器。见下面的代码;

img:hover {
-webkit-filter: grayscale(1) invert(1);
filter: grayscale(1) invert(1);
}

<img src="https://newevolutiondesigns.com/images/freebies/black-white-background-1.jpg">

Answer 2

CSS过滤器invert功能运行良好。