如何使用 CSS 为具有透明背景的白色图像着色？

Question

我有一张图片包含：

白色像素：我想将它们动态设置为任何颜色
黑色像素：我希望这些像素保持黑色
透明像素：我希望这些像素能透过当前所处的任何背景显示。

下面是叠加在微红色背景上的图像示例：

我希望能够为兔子着色任何我喜欢的颜色，而无需诉诸背景技巧，因为显示着色图像的背景颜色应该保持不变。

首选纯 CSS 解决方案，但也欢迎 javascript 图像处理想法。

兔子本身：

Answer 1

使用蒙版和混合模式你可以做到：

.bunny {
  --img: url(https://i.ibb.co/ngFGkgy/clOwR.png); /* Your png */

  width: 32px;
  aspect-ratio: 1;
  background: var(--img) center/cover;
  background-blend-mode: darken;
  -webkit-mask: var(--img) center/cover;
          mask: var(--img) center/cover;
          
  background-color: red; /* the color */
}

<div class="bunny"></div>
<div class="bunny" style="width:100px;background-color:green"></div>
<div class="bunny" style="width:100px;background-color:blue"></div>

如何使用 CSS 为具有透明背景的白色图像着色？

How do I tint a white image that has a transparent background, using CSS?

html

css

image