如何使用jQuery为PNG格式图片添加颜色？

你遇到的核心问题是：background-color仅会填充图片透明区域的背景，而color属性只对文本生效，二者都无法改变PNG图片本身的非透明区域颜色。以下是两种简单可行的解决方案：

方法一：容器+混合模式（保留图片明暗细节） #

这种方式通过容器背景色与图片的混合模式，让选中颜色覆盖到图片非透明区域，同时保留原图的明暗层次。

修改HTML #

将图片包裹进一个容器：

<div class="image-wrap">
  <img class="deer" src="images/deer.PNG" alt="">
</div>

添加CSS #

设置容器与图片的样式，启用混合模式：

.image-wrap {
  display: inline-block; /* 容器自适应图片尺寸 */
}
.deer {
  mix-blend-mode: multiply; /* 让图片与容器背景色混合 */
  width: 100%; /* 图片占满容器 */
}

修改JavaScript #

点击图片时，给容器设置选中的颜色：

let color = "";

$(".container").click(function(){
  color = $(this).css("background-color");
})

$(".image-wrap").click(function(){
  $(this).css("background-color", color);
})

方法二：CSS Filter（直接转为纯色） #

如果需要让图片完全变为选中的纯色，可以通过CSS滤镜实现颜色转换。

修改JavaScript #

添加颜色转色相的辅助函数，直接给图片设置滤镜：

// 将RGB颜色转为色相角度
function rgbToHue(rgbStr) {
  const [r, g, b] = rgbStr.match(/\d+/g).map(Number);
  const max = Math.max(r, g, b);
  const min = Math.min(r, g, b);
  let hue = 0;
  if (max !== min) {
    const delta = max - min;
    switch(max) {
      case r: hue = ((g - b) / delta) % 6; break;
      case g: hue = (b - r) / delta + 2; break;
      case b: hue = (r - g) / delta + 4; break;
    }
  }
  hue = Math.round(hue * 60);
  return hue < 0 ? hue + 360 : hue;
}

let color = "";

$(".container").click(function(){
  color = $(this).css("background-color");
})

$(".deer").click(function(){
  const hue = rgbToHue(color);
  $(this).css("filter", `sepia(1) saturate(10) hue-rotate(${hue}deg)`);
})

这种方法无需修改HTML与CSS，直接通过滤镜将图片转为选中的纯色。

内容的提问来源于stack exchange，提问作者Aung