CSS技巧：蒙版改变PNG图标的颜色

原来的图标如下，是蓝色的：

要将下面的图标更改为#f4615c红色，最简单的方法是创建一个使用蒙版。

以下HTML和CSS代码：

<span class="colorful"></span>复制代码

.colorful {
    display: inline-block;
    width: 32px; height: 32px;
    background-color: #f4615c;
    -webkit-mask: url(./xin.svg) no-repeat;
    mask: url(./xin.svg) no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}复制代码

CSS3 mask默认实现基于透明度的遮罩效果。即，显示纯色区域并隐藏透明区域。因此，我们只需要使用目标图标颜色#f4615c作为背景颜色，然后使用原始图标（不管它是什么颜色）作为遮罩图像，效果就可见了。

眼见为实，可以点击这里：CSS mask实现每种颜色的小图标演示

效果如下：

CSS3 mask非常好用，掌握它，效果事半功倍事半功倍，知识点。其中有很多，并且包含了很多属性值。如果有兴趣，可以参考我之前的文章：《CSS Mask CSS3 Mask/Masks详细介绍》，非常系统地介绍了相关知识点。

作者：张鑫旭
来源：掘金