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

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

CSS 遮罩 mask/-webkit-mask_mask

代码：

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);复制代码

线上效果：codepen.io/jianxiujiuc…

mask的属性值如下：

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

渐变遮罩

-webkit-mask: linear-gradient(#000, transparent);mask: linear-gradient(#000, transparent);复制代码

对渐变不了解的同学可以看看：

利用遮罩实现换色效果

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

CSS 遮罩 mask/-webkit-mask_CSS_02