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

Question

CSS中是否可以使用滤镜为黑白图像添加颜色？我正在谈论使用Photoshop中可能使用的过滤器,更好的例子是Microsoft PowerPoint中的过滤器.

我想要做的是:我有一个黑色图标的图像文件.我想为它添加一个过滤器,使得图像中的所有内容(背景都是透明的)将具有我通过使用过滤器选择的颜色,这样我就能够拥有我想要的任何颜色的图标.就像我在标题中所说的那样,它是一个PNG图像,据我所知,我不能使用SVG过滤器.

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

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

非常感谢提前!

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" />

Answer 2

请添加CSS

filter: brightness(0) invert(1);

对于它将起作用的图像，将颜色更改为白色