7种方法改变PNG图标颜色在处理网页或应用程序的图标时，我们有时需要动态或静态地更改图标的颜色。虽然PNG图标由于其具有

在处理网页或应用程序的图标时，我们有时需要动态或静态地更改图标的颜色。虽然PNG图标由于其具有透明性和高质量而广受欢迎，但它们不像SVG图标那样容易改变颜色。本文介绍 7 种改变PNG图标颜色的方法：

可以将这些方法重新组织为两大部分：兼容性方案 和 CSS3新特性。

使用CSS3新特性

1. 使用CSS的`tint`属性（实验性）

在一些支持该属性的浏览器中，你可以使用-webkit-mask-box-image的tint色值来给图标上色。这是一个实验性的CSS3特性。

.icon {
  -webkit-mask: url('path/to/icon.png') no-repeat;
  -webkit-mask-size: 100%;
  -webkit-mask-box-image: tint(#ff0000); /* 将图标颜色变为红色 */
}

2. 使用SVG作为轮廓并填充颜色（利用CSS3的`mask`属性）

对于简单的图标轮廓，可以使用SVG，并通过CSS3的mask属性应用PNG图标作为蒙版。这样可以通过改变SVG的颜色来改变图标颜色。

.icon {
  width: 100px;
  height: 100px;
  -webkit-mask-image: url('path/to/icon.png');
  mask-image: url('path/to/icon.png');
  background-color: red; /* 设置你需要的颜色 */
}

这种是我在工作中用的比较多的做法，比如说，现在要将下面的图标染成彩色的：

3. 使用CSS滤镜效果

CSS3引入了滤镜效果，虽然不能直接改变图标的颜色，但可以创建各种视觉效果，从而间接改变图标的外观。

.icon {
  filter: brightness(0) saturate(100%) invert(30%) sepia(100%) saturate(500%) hue-rotate(180deg);
}

请注意，这些分类是基于技术特性和浏览器支持情况。随着时间的推移，一些CSS3特性可能会变得更加广泛支持，从而迁移到兼容性方案类别中。

传统的兼容性方案

1. 使用多个PNG图标

对于需要支持多种颜色的图标，可以准备多个颜色的PNG图标版本，并使用CSS类来切换显示。

.icon-red {
  background-image: url('path/to/icon-red.png');
}

.icon-blue {
  background-image: url('path/to/icon-blue.png');
}

2. 使用CSS Sprites技术

CSS Sprites允许你通过改变背景位置来显示不同的图标部分，这对于有多个颜色版本的图标非常有效。

.icon {
  background: url('path/to/icons-sprite.png') no-repeat;
  width: 16px;
  height: 16px;
}

.icon-red {
  background-position: 0 0;
}

.icon-blue {
  background-position: -16px 0; /* 假设图标宽度为16px */
}

3. 使用JavaScript动态修改

JavaScript可以用于根据用户交互或其他条件动态地更改图标。

var iconElement = document.getElementById('iconElement');
iconElement.style.backgroundImage = 'url(path/to/icon-blue.png)';

4. 使用HTML5 Canvas

通过HTML5 Canvas API可以动态地绘制和着色PNG图标。

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var img = new Image();
img.onload = function() {
  ctx.drawImage(img, 0, 0);
  ctx.globalCompositeOperation = 'source-atop';
  ctx.fillStyle = 'rgba(255, 0, 0, 1)'; // 纯红色
  ctx.fillRect(0, 0, canvas.width, canvas.height);
};
img.src = 'path/to/icon.png';

对于使用canvas的做法，我只能说这属于大杀器了，毕竟操作像素级别的改变可以解决绝大多数问题。不过由性能问题，但是性能问题可以在 web worker 中解决，所以这种做法虽然麻烦了一些但是可以作为兜底的方案。

7种方法改变PNG图标颜色