定义
遮罩层必须至少有两个图层，上面的一个图层为“遮罩层”，下面的称“被遮罩层”；这两个图层中只有相重叠的地方才会被显示。
解释挺长，其实用图片来看就十分直观了：
mask的属性值如下(大致与background类似)：
mask-image
mask-mode
mask-repeat
mask-position
mask-clip
mask-origin
mask-size
mask-type
mask-composite
本文只挑几个属性详细说明。
遮罩常用属性 mask-image、mask-position、mask-size
mask-image与background-image的用法一致，可以使用图片、渐变
// 图片
-webkit-mask: url(https://s2.ax1x.com/2020/02/14/1XE6lF.png);
mask: url(https://s2.ax1x.com/2020/02/14/1XE6lF.png);
// 渐变
-webkit-mask-image: linear-gradient(#000, transparent);
mask-image: linear-gradient(#000, transparent);
对渐变不了解的同学可以看看： 【详谈CSS渐变】
利用遮罩实现换色效果
大家做需求的时候有没有遇到过，设计师给的图标图片经常要换色，同一个图标在不同的场景下显示不同的颜色。 图标可以使用SVG来完成，比较适合稳定的项目迭代。也可以使用图片来制作，比较适合短期的活动页。
当图片要达到多种颜色，又希望只使用一套图时候，我们可以用遮罩来实现。
首先准备一组2倍的遮罩图片：
我们需要用到mask-size将背景图进行缩放。mask-size用法等同于background-size。
mask-repeat用法等同于background-repeat
遮罩加颜色代码：
.icon{
width: 80px;
height: 80px;
-webkit-mask-image: url(../img/mask.png);
-webkit-mask-repeat: no-repeat;
-webkit-mask-size: 320px auto;
background: linear-gradient(145deg, #8cb8ff, #1c85ff); // 图标的颜色用背景色来实现
}
.is-vip{
.icon{
background: linear-gradient(145deg, #e7a568, #9d5a1a);
}
}
.is-super{
.icon{
background: linear-gradient(145deg, #ffeccb, #ffcb76);
}
}
遮罩背景的定位与 background-position 的使用方法一致（适用于同尺寸图标）：
@for $i from 1 through 4{
.icon:nth-child(#{$i}){
$n: $i - 1;
-webkit-mask-position: #{$n*-80}px 0;
}
}
效果如下：
遮罩合成 -webkit-mask-composite
-webkit-mask-composite 是指在同时使用多个图片时，遮罩的混合方式。
它有以下值：
| 值 | 描述 |
|---|---|
| source-over | 源遮罩图像在目标遮罩图像上渲染 |
| source-in | 遮罩重叠的位置显示，不重叠的位置不显示 |
| source-out | 清除源遮罩图像和目标遮罩图像中的重叠像素；源遮罩图像的所有剩余像素均被渲染 |
| source-atop | 仅目标遮罩生效（最后一个遮罩） |
| destination-over | 目标遮罩图像在源遮罩图像上渲染 |
| destination-in | 遮罩重叠的位置显示，不重叠的位置不显示 |
| destination-out | 清除源遮罩图像和目标遮罩图像中的重叠像素；源遮罩图像的所有剩余像素均被渲染 |
| destination-atop | 仅源遮罩生效（第一个遮罩） |
| xor | 遮罩叠加处为透明，透明处与再与新的目标遮罩叠加为不透明，遵循乘法原理 |
| clear | 清除遮罩 |
| copy | 源遮罩图像替换目标遮罩 |
| plus-lighter | 相交的区域增亮，仅遮罩有透明度时生效 |
效果图如下：
CSS-Doodle
CSS-Doodle利用xor这个属性，创造很多万花筒一样的图案：
codepen.io/Chokcoco/pe…
