CSS - 使用过滤器为黑白 PNG 图像添加颜色

Question

是否可以在 CSS 中使用过滤器为黑白图像添加颜色？我说的是在 Photoshop 中使用过滤器，一个更好的例子是 Microsoft PowerPoint 中的过滤器。

我要做的是：我有一个黑色图标的图像文件。我想向它添加一个过滤器，以便图像中的所有内容（背景是透明的）都将具有我通过使用过滤器选择的颜色，这样我就可以拥有我想要的任何颜色的图标。就像我在标题中所说的那样，它是一个 PNG 图像，据我所知，我不能使用 SVG 过滤器。

我怎样才能做到这一点？我正在尝试使用原始图标为网站编写主题，但我一直坚持这一点。

更新：我想使用原始的 PNG 图像。我不会用 SVG 或预编辑的 PNG 替换它们。

提前非常感谢！

原文由 Gal Grünfeld 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您可以使用 CSS 过滤器来实现，但我完全不建议这样做：

 .colorizable {
    filter:
        /* for demonstration purposes; originals not entirely black */
        contrast(1000%)
        /* black to white */
        invert(100%)
        /* white to off-white */
        sepia(100%)
        /* off-white to yellow */
        saturate(10000%)
        /* do whatever you want with yellow */
        hue-rotate(90deg);
}

.example-clip {
    display: block;
    height: 20px;
    margin: 1em;
    object-fit: none;
    object-position: 0 0;
    width: 300px;
}

.original {
    filter: contrast(1000%);
}

body {
    background: #333;
}

 <img class="colorizable example-clip" src="https://cdn.sstatic.net/Sites/stackoverflow/img/wmd-buttons.svg" />
<img class="original example-clip" src="https://cdn.sstatic.net/Sites/stackoverflow/img/wmd-buttons.svg" />

原文由 Ry- 发布，翻译遵循 CC BY-SA 3.0 许可协议