浅谈CSS 图片遮罩 mask/-webkit-mask

1.图片遮罩

我们先来认识何为遮罩。
上一段百度的解释：

遮罩层必须至少有两个图层，上面的一个图层为“遮罩层”，下面的称“被遮罩层”；这两个图层中只有相重叠的地方才会被显示。

解释挺长，其实用图片来看就十分直观了：

代码：

background-image: url(https://s2.ax1x.com/2020/02/13/1LF8iD.jpg);
-webkit-mask: url(https://s2.ax1x.com/2020/02/14/1XE6lF.png);
mask: url(https://s2.ax1x.com/2020/02/14/1XE6lF.png);

线上效果：https://codepen.io/jianxiujiu...

mask的属性值如下：

值	说明
url(_'URL'_)	图像的URL
none	默认值，无图像背景会显示。
渐变	包括线性渐变、径向渐变、圆锥渐变

2.渐变遮罩

-webkit-mask: linear-gradient(#000, transparent);
mask: linear-gradient(#000, transparent);

对渐变不了解的同学可以看看：
https://segmentfault.com/a/11...

3.利用遮罩实现换色效果

大家做需求的时候有没有遇到过，设计师给的图标图片经常要换色,同一个图标在不同的场景下显示不同的颜色。
图标可以使用SVG来完成，也可以使用图片来制作。
图片要达到多种颜色又只使用一套图，我们可以用遮罩来实现。

线上效果：https://codepen.io/jianxiujiu...