Vue项目中如何将黑色PNG图标颜色修改为指定色值#0768fd

原有代码不生效的原因 #

• color属性仅作用于文本内容，无法修改img标签引入的图片本身的像素颜色
• 单独的invert滤镜只能实现整体反色效果，无法精准映射到你指定的#0768fd色值

可行实现方案 #

方案1：使用组合CSS滤镜精准转色（无需修改原图片格式） #

你可以直接替换你现有的.invert类样式，使用组合滤镜直接把黑色图标转为目标蓝色，代码如下：

.invert {
  /* 以下参数为#0768fd对应的精准滤镜组合 */
  filter: brightness(0) saturate(100%) invert(27%) sepia(97%) saturate(3731%) hue-rotate(206deg) brightness(99%) contrast(97%);
}

原理：先通过brightness(0)把原图转为纯黑，再通过后续滤镜参数将黑色精准映射为#0768fd，不需要修改原有图片资源。

方案2：替换为SVG图标（推荐，灵活性最高） #

如果可以将原png图标替换为SVG格式，你可以直接内联SVG代码，将内部的fill属性设置为currentColor，之后直接设置元素的color属性就能修改图标颜色：

<!-- 内联SVG示例 -->
<svg class="icon-class" viewBox="0 0 24 24" fill="currentColor">
  <!-- 原SVG路径内容 -->
</svg>

.icon-class {
  color: #0768fd;
  /* 其余原有样式保留 */
}

该方案后续修改图标颜色只需调整color属性即可，还支持任意缩放不失真。

方案3：使用mask遮罩实现 #

你也可以将img标签替换为div，通过遮罩属性实现颜色修改：

<div class="icon-mask"></div>

.icon-mask {
  width: 24px !important;
  height: 24px !important;
  margin: 0 6px 0 0;
  padding: 2px;
  background-color: #0768fd;
  /* 兼容webkit内核浏览器 */
  -webkit-mask: url('@/assets/images/group-icon.png') center / contain no-repeat;
  mask: url('@/assets/images/group-icon.png') center / contain no-repeat;
  border-radius: 50%;
  border: solid 1px black !important;
}

原理是将图片作为遮罩层，遮罩透明的区域显示div的背景色，以此实现替换图标颜色的效果。

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