在png上使用不同颜色设置相同的颜色过滤器

Question

我有很多.png格式的图标，但它们的颜色不同而且不一样。

有没有办法在css中设置一个特定的滤镜颜色，将我的所有png图标转换为相同的颜色？

像橙色会变成紫色，绿色会变成紫色吗？

Answer 1

这是一个如何使用filter来实现这一目标的例子（颜色不是完美匹配，但我不想花几个小时调整它）：

.orange:hover {
  filter: hue-rotate(250deg) brightness(110%);
}

.green:hover {
  filter: hue-rotate(160deg) brightness(70%);
}

<img class="orange" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8AQMAAAAAMksxAAAABlBMVEX/////QwAwDvtVAAAAAXRSTlMAQObYZgAAABZJREFUeF5joAeQ/w8EB2jCGGXQDgAANDq9XmH0sIEAAAAASUVORK5CYII=" />
<img class="green" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8AQMAAAAAMksxAAAABlBMVEX///8I/wDI9X+0AAAAAXRSTlMAQObYZgAAABZJREFUeF5joAeQ/w8EB2jCGGXQDgAANDq9XmH0sIEAAAAASUVORK5CYII=" />

但是，并非所有浏览器都支持此功能（Browser support here）

我个人建议您在上传之前编辑图像，如果需要某种转换，请使用两个图像并使用不透明度在它们之间进行转换。

Answer 2

你可以使用注释和前一个答案中指出的“过滤器”来完成。由于你的图标中有很多颜色，你需要为每个图标应用不同的滤镜，或者......两个滤镜：第一个使它们全部为“相同的颜色”，第二个将它们“再次着色”以获得所需的颜色。

filter: sepia(100%) hue-rotate(90deg);

无论如何，这将取决于对目标浏览器的支持。

您可以在图像编辑软件中执行相同操作：制作图像灰度，然后编辑颜色曲线以获得所需的颜色。