如何用CSS实现黑色PNG图标hover时变蓝色？CSS Filters失效解决

嘿，我明白你想用CSS Filters实现但没成功的痛点——黑色本身是无色彩的（色相为0且饱和度为0），直接用hue-rotate这类滤镜确实不会有效果，因为没色彩可调整。下面给你几个靠谱的实现方案，从简单到灵活都有：

方案1：CSS Mask遮罩法（最推荐，颜色精准可控） #

这个方法本质是把图标当作“镂空模板”，用容器的背景色来显示图标颜色，hover时只需要切换背景色即可，完全不用纠结滤镜参数：

/* 图标容器 */
.icon {
  display: inline-block;
  width: 48px; /* 替换成你的图标实际尺寸 */
  height: 48px;
  /* 默认显示黑色 */
  background-color: #000;
  /* 用你的黑色PNG作为遮罩，透明部分会自动镂空 */
  -webkit-mask: url('black-icon.png') no-repeat center / contain;
  mask: url('black-icon.png') no-repeat center / contain;
}

/* Hover时切换为目标蓝色 */
.icon:hover {
  background-color: #007bff; /* 替换成你想要的蓝色色值 */
}

注意：mask属性在现代浏览器都支持，若要兼容旧版Chrome/Safari，需要加上-webkit-前缀。

方案2：混合模式（Mix Blend Mode）法 #

利用CSS的混合模式特性，让图标和背景色混合出想要的效果，适合不想修改图标引用方式的场景：

/* 给图标套一个容器 */
.icon-wrapper {
  display: inline-block;
  background-color: #007bff; /* 目标蓝色 */
}

.icon {
  display: block;
  width: 48px;
  height: 48px;
  background-image: url('black-icon.png');
  background-size: cover;
  /* 默认状态：黑色和蓝色混合后仍显示黑色 */
  mix-blend-mode: multiply;
}

.icon:hover {
  /* Hover时：黑色和蓝色混合后显示蓝色 */
  mix-blend-mode: screen;
}

方案3：CSS Filter组合法（如果必须用Filter） #

既然你一开始尝试了Filter，那给你一个能让黑色转蓝色的滤镜组合——核心是先给黑色“注入”基础色彩，再调整色相和饱和度：

.icon {
  /* 默认显示原始黑色图标 */
  filter: none;
}

.icon:hover {
  /* 组合滤镜把黑色转为蓝色，可根据需求微调数值 */
  filter: sepia(1) saturate(10) hue-rotate(190deg) brightness(0.8);
}

小提示：如果蓝色不够精准，可以调整hue-rotate的角度（蓝色区间大概在180-220deg）、saturate的饱和度值，直到匹配你的目标效果。

这几个方案里，方案1的遮罩法是最稳定的，颜色完全由你指定，不会出现滤镜那种颜色偏差的问题，推荐优先尝试~

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