html - 如何使用 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>