我们先来认识何为遮罩。
上一段百度的解释：
遮罩层必须至少有两个图层，上面的一个图层为“遮罩层”，下面的称“被遮罩层”；这两个图层中只有相重叠的地方才会被显示。
解释挺长，其实用图片来看就十分直观了：
代码：
background-image: url(https://s2.ax1x.com/2020/02/13/1LF8iD.jpg); -webkit-mask: url( mask: url(https://s2.ax1x.com/2020/02/14/1XE6lF.png);
mask的属性值如下：
| 值 | 说明 |
|---|---|
| url(_'URL'_) | 图像的URL |
| none | 默认值，无图像背景会显示。 |
| 渐变 | 包括线性渐变、径向渐变、圆锥渐变 |
-webkit-mask: linear-gradient(#000, transparent);mask: linear-gradient(#000, transparent);
大家做需求的时候有没有遇到过，设计师给的图标图片经常要换色,同一个图标在不同的场景下显示不同的颜色。
图标可以使用SVG来完成，也可以使用图片来制作。
图片要达到多种颜色又只使用一套图，我们可以用遮罩来实现。
178-3937-3553 / 135-2356-0020 地址：河南洛阳开元大道开元壹号
邮箱：446804118@qq.com
17839373553 
