通过 CSS 更改图像的颜色

Question

我正在尝试使用 css 将图像更改为红色。这是我到目前为止所拥有的

img {
 -webkit-filter: invert(90%); filter: invert(90%);
 }

https://jsfiddle.net/md1/

原文由 Jouba Ayedi 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您需要组合两个过滤器 saturate 和 hue ，下面是获得“红色”的可能组合（如果您使用颜色选择器，它将生成默认的网页“红色” - #FF0000 或只是 #F00 ，因为你可以选择你的红色，更强或更轻。

 img {
  webkit-filter: saturate(100) hue-rotate(-140deg);
  filter: saturate(100) hue-rotate(-140deg)
}

 <img class="screencap" src="https://i.stack.imgur.com/speoA.png">

更新

据称，在第一个片段中有一个错误（在与 @kaiido 聊天之后），它只是在 FF 中使用 Windows 在标记中变成红色 img - 而在其他操作系统的其他浏览器中保持粉红色，（因此我将在 bugzilla 中提交错误）

所以有一种方法可以跨浏览器使用混合过滤器

 img {
  -webkit-filter: brightness(0.6)contrast(3.4)hue-rotate(217deg)saturate(9.9);
  filter: brightness(0.6)contrast(3.4)hue-rotate(217deg)saturate(9.9);
}

 <img class="screencap" src="https://i.stack.imgur.com/speoA.png">

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

Answer 2

您必须使用滤镜功能为图像赋予颜色。例如将白色转换为黑色，反之亦然，就像它一样使用 filter .invert(100%)。

原文由 Hamid khan 发布，翻译遵循 CC BY-SA 4.0 许可协议