mask 就是 CSS 遮罩，也就是把一些东西遮盖起来，实际上就是 PS 中的蒙版，mask 相关的属性和 background 的属性很类似，可以类比学习。

当我们给一个元素设置了 mask-image 之后，该元素就被加上了一层蒙版

.box {
	background-color: aqua;
	mask-image: url("./img/bird.png");
	height: 500px;
	width: 500px;
}


图片： 

实际上，蒙版就是给这个元素一张图片，按照这个图片的大小和形状把元素的一部分遮住，在 CSS 中，蒙版图片中的有颜色的区域是会展示出来的区域，而透明色的区域是会直接被擦除掉的，相当于就是一个橡皮擦，把透明的区域给擦掉了，而半透明的区域当然就只会显示半透明啦。

这和 PS 是不一样的，PS 保留黑色擦除白色，而在 CSS 中是保留有颜色的区域，擦除透明色的区域。

.box {
    background-color: aqua;
    mask-image: linear-gradient(to right, transparent 0%, black 100%);
    height: 500px;
    width: 500px;
}


mask 和背景非常类似，很多和背景有关的属性在 mask 中都能看到影子

• mask-image：设置 mask 蒙版的图片路径
• mask-mode：设置 mask 蒙版的模式
• mask-repeat：设置 mask 蒙版是否重复平铺
• mask-position：设置 mask 蒙版的位置
• mask-clip：设置 mask 蒙版的作用范围
• mask-origin：设置 mask 蒙版的起始位置
• mask-size：设置 mask 蒙版的大小
• mask-composite：多个蒙层的处理方式

maxk-clip 还有 fill-box，stroke-box，view-box 三个属性，但是这三个属性涉及到 SVG，这里不多涉及。

下面介绍一下两个没见过的东西，mask-mode 和 mask-composite。

在 mask-image 其实是可以设置多个蒙层图片的，这一点和 background-image 其实也非常类似对吧，而 mask-composite 就是设置多蒙层的情况下如何处理，取值有以下几个：

• add 表示遮罩累加，是默认值。
• subtract 表示遮罩相减，也就是遮罩图片重合的区域不显示。这就意味着，遮罩图片越多，遮罩区域越小。
• intersect 表示遮罩相交，也就是遮罩图片重合的区域才显示遮罩。
• exclude 表示遮罩排除，也就是遮罩图片重合的区域被当作透明的

mask-mode 就是设置遮罩模式的，我们知道 CSS 中的遮罩其实是根据 alpha 通道来的，也就是通过透明度来的，实心的颜色就会显示，透明的颜色就会擦去，我们也可以设置为 luminance，此时就会根据亮度来进行遮罩。默认值为 match-source，在这种模式下，如果是图片就采用 alpha 来遮罩，如果是 SVG 中的 mask 元素，就使用 luminance 进行遮罩。