CSS 中是否可以使用滤镜为黑白图像添加颜色？我说的是像 Photoshop 中那样使用过滤器，更好的例子是 Microsoft PowerPoint 中的过滤器。
我想做的是：
我有一个黑色图标的图像文件。
我想为其添加一个过滤器，以便图像中的所有内容（背景是透明的）都将具有我通过使用过滤器选择的颜色，这样我就可以将图标设置为我想要的任何颜色。
正如我在标题中所说，这是一个 PNG 图像，因此据我所知，我无法使用 SVG 滤镜。
我怎样才能做到这一点？我正在尝试使用原始图标为网站编写一个主题，但我陷入了困境。
更新：我想使用原始的 PNG 图像。我不会用 SVG 或预编辑的 PNG 替换它们。
预先非常感谢！
你可以使用 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" />
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
