用css给png图标换颜色

要使用CSS给PNG图标换色，可以使用CSS的filter属性或者通过mix-blend-mode与background-image实现。以下是一个使用filter属性的例子：

HTML:

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

CSS:

.icon {
  width: 100px;
  height: 100px;
  background-image: url('icon.png');
  background-size: cover;
  filter: drop-shadow(0 0 0 #FF0000); /* 这里的颜色将会是新的颜色 */
}

这段代码会将.icon类中的PNG图标的原始颜色替换为红色。drop-shadow 滤镜的颜色设置为想要的新颜色，但由于它是一个阴影效果，它不会影响原始图像本身，因此看起来就像是改变了图标的颜色。

如果你想要完全替换图标颜色，可以使用mix-blend-mode和一个颜色重叠的方式：

HTML:

<div class="icon-wrapper">
  <div class="icon"></div>
  <div class="color-overlay"></div>
</div>

CSS:

.icon-wrapper {
  position: relative;
  width: 100px;
  height: 100px;
}
 
.icon {
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: url('icon.png');
  background-size: cover;
}
 
.color-overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #FF0000; /* 这里的颜色是新的颜色 */
  mix-blend-mode: multiply;
}

在这个例子中，.icon类依然是原始的PNG图标，而.color-overlay类是一个覆盖在图标上方的全颜色层，使用mix-blend-mode: multiply;将图标颜色与覆盖层的颜色相乘，产生新的颜色效果。这种方法更加真实地改变了图标的颜色，但可能需要根据实际情况调整混合模式以达到预期的视觉效果。