Question

CSS中是否可以为黑色和白色添加颜色？使用过滤器的白色图像？我正在谈论在Photoshop中使用类似的过滤器，更好的例子是Microsoft PowerPoint中的过滤器。

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

我该怎么做？我试图使用原始图标为网站编写主题，但我仍坚持这一点。

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

提前多多感谢！

Answer 1

你可以使用CSS过滤器，但我根本不建议这样做：

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

Answer 2

请添加css

filter: brightness(0) invert(1);

它将工作的图像，将颜色更改为白色

Answer 3

sepia()为黑白添加黄色，其他滤镜现在可以使用该颜色。

.foo {
    filter: sepia(1) saturate(5) brightness(0.5) hue-rotate(135deg);
}

CSS - 为Black＆amp;添加颜色使用滤镜的白色PNG图像

3 个答案: