使用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特性可能会变得更加广泛支持，从而迁移到兼容性方案类别中。

作者：慕仲卿

链接：https://juejin.cn/post/7360612648043266088

来源：稀土掘金

著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。