不使用CSS filter修改图片颜色的实现方案咨询

可用实现方案（均不依赖CSS filter属性） #

方案1：mask遮罩改色（适合纯色图标/图片统一改单色） #

该方案可以无视原图本身的颜色（哪怕是全黑图片也能正常生效），直接将图片不透明区域替换为你想要的任意纯色：

.color-img {
  width: 200px;
  height: 200px;
  /* 自定义目标颜色，支持纯色、渐变等 */
  background: #f43f5e;
  /* 引入原图作为遮罩，仅不透明区域会显示上方的背景色 */
  mask: url("./your-image.png") center / 100% no-repeat;
  -webkit-mask: url("./your-image.png") center / 100% no-repeat;
}

对应HTML直接使用空标签即可：

<div class="color-img"></div>

方案2：混合模式叠加改色（适合多色图片全色调重写） #

通过多层叠加层配合混合模式，可实现对原图所有颜色的整体重定义，支持渐变色、自定义色卡等复杂改色需求：

<div class="img-wrap">
  <img src="./your-image.jpg" alt="原始图片">
  <!-- 两层叠加层实现色彩替换 -->
  <div class="overlay luminance-layer"></div>
  <div class="overlay color-layer"></div>
</div>

.img-wrap {
  position: relative;
  width: 300px;
  overflow: hidden;
}
.img-wrap img {
  width: 100%;
  display: block;
}
.overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
/* 第一层提取原图明度信息，抹平原始色彩 */
.luminance-layer {
  background: #fff;
  mix-blend-mode: luminosity;
}
/* 第二层写入自定义目标色彩，可自行调整背景配置 */
.color-layer {
  /* 示例为渐变色，也可写为纯色、自定义多色渐变 */
  background: linear-gradient(45deg, #f43f5e, #3b82f6, #22c55e);
  mix-blend-mode: color;
}

你可以自行调整color-layer的背景配置，实现任意想要的全色改色效果。

方案3：内联SVG直接改色（适合矢量图场景） #

如果你的图片是SVG格式，直接将SVG代码内嵌到HTML中，直接修改标签的fill、stroke属性即可实现任意部位的颜色修改，可控性最高：

<svg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <!-- 直接修改fill属性值即可改色，不同路径可单独设置不同颜色 -->
  <path d="M50 0L100 50L50 100L0 50z" fill="#f43f5e" />
</svg>

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