如何使用 CSS 将白色透明图像重新着色为任意颜色？答案

【问题标题】：How to recolor a white-on-transparent image to an arbitrary color using CSS?如何使用 CSS 将白色透明图像重新着色为任意颜色？
【发布时间】：2016-12-12 14:28:19
【问题描述】：

如何仅使用 CSS 拍摄仅具有白色和透明像素 (example) 的图像并重新着色为红色或橙色？

之前有人问过以下问题 -

Change color of PNG image via CSS?

答案说要使用过滤器，但没有说明哪种过滤器组合可以使它起作用。是否有任何滤镜组合可以让我将透明图像上的白色更改为红色？

澄清一下：我想为图像的白色部分重新着色，而不是为背景着色。例如，我希望它是红色透明的。

img {
  -webkit-filter: brightness(50%) saturate(200%) hue-rotate(90deg);
  }

&lt;img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f4/White_Globe_Icon.png/600px-White_Globe_Icon.png"&gt;&lt;/img&gt;

【问题讨论】：

尝试给图片一个background-color。
Change color of PNG image via CSS?的可能重复
@redelschaap 我就是这么说的。我还说答案没有回答问题。
那么答案中的过滤器是您重新着色图像的唯一选择。您不能只更改图像中对象的颜色，因为它们都是像素。您唯一的选择是使用 SVG 文件并使用 css 中的 color 属性对其进行着色。因为 SVG 文件包含路径，而不是像素。
我根据您的说明更新了我的回答

标签： html image css css-filters

【解决方案1】：

我玩了一会儿，找到了一个可能的解决方案，只画白色部分：

img {
  display: block;
  background: black;
  -webkit-filter: brightness(.5);
}
.recolor {
  position: relative;
  display: inline-block;
  -webkit-filter: brightness(1) contrast(300%) invert(1);
}
.recolor:after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 255, 255, 0.3);
}

<figure class="recolor">
  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f4/White_Globe_Icon.png/200px-White_Globe_Icon.png">
</figure>

工作原理：

将图像背景设为黑色并将其亮度设置为一半，使前景变为灰色
创建一个包装元素 (<figure>) 并创建一个覆盖 (:after) 您希望的反色且不透明度相对较低
现在过滤 wrapper 元素：让它如此明亮且对比度如此之高，以至于背景变为黑色，但前景色仍然存在。
现在只需反转包装器即可将前景色设为白色

限制：透明度丢失，由于过滤颜色可能不是您想要的颜色，browser support 不是最佳的

【讨论】：

【解决方案2】：

只需给图像添加背景颜色，例如下面。

使用这张图片

注意：图片是透明的

CSS

img{
    background-color: red;
}

HTML

<img src="test.png">

【讨论】：

【解决方案3】：

可以使用滤镜为白色图像“着色”，但结果并不完美。

第一步是sepia 过滤器，然后是hue-rotate。

真正的“红色”可能更难实现，但您可以进一步尝试。

img {
  max-height: 100vh;
  width: auto;
  -webkit-filter: 
    sepia(100%) 
    saturate(2000%) 
    hue-rotate(222deg);
}
body {
  background: green;
}

&lt;img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f4/White_Globe_Icon.png/600px-White_Globe_Icon.png"&gt;&lt;/img&gt;

【讨论】：