CSS的mask（遮罩），有时也称CSS的蒙层，最早是苹果公司2008年提出的，并且添加到webkit引擎当中。遮罩提供一种基于像素级别的，可以控制元素透明度的能力，类型于png24位或png32位中的alpha透明通道的效果。2012年被纳入到W3C的草案中，但这个版本与苹果公司提出的版本是不同的。时至今日，该规范已经有多个版本，现在是CSS Masking Module Level1版本，属于TR阶段。据Caniuse.com统计来讲，该属性得到的支持度还是有一定的限制，仅部分属性被浏览器支持。虽然如此，但该属性还是非常的有意思，值得大家花点时间去探究，比如今天要聊的mask-composite属性就是非常有意思的一个属性。

mask原理和语法

文章开头也提到过，mask提供一种基于像素级别的，可以控制元素透明度的能力，类似于png24位或png32位中alpha透明通道的效果。

图像是由RGB三个通道以及在每个像素上定义的颜色组成的。但是在他们之上还有第四个通道，即alpha通道。通过高度定义每个像素上的透明度。白色意味着不透明，黑色意味着透明，介于黑白之间的灰色表示半透明。比如下图：

给一个HTML元素使用CSS的mask属性，就会这样处理。不用给图片应用一个alpha通道，只需要给一个图片运用一个mask-image或mask-border-source的样式：

mask-image: url(mouse.png)

他从图片遮罩里读出图片的透明信息，然后应用到HTML元素上，比如下图这个效果：

遮罩可以让头像按照特定形状显示。

CSS遮罩可以使得图片按照任意的形状显示。或者你可能有很长的文本需要滚动显示，那么可以使用遮罩让他从不透明到透明的渐变显示。

在使用mask的时候，其中有一个不可或缺的部分就是遮罩（也被称为蒙板），该遮罩可以是半透明的PNG图片、CSS的渐变或SVG元素，遮罩元素的alpha值为0的时候会覆盖下面的元素，为1的时候会完全显示下面的内容。如下图所示：

而使用CSS的mask也并不太复杂，其语法规则和background非常的类似。在W3C官网上提供了两者相关属性的对照表：

具体的语法规则：

mask: <mask-layer>

其<mask-layer>对应的值：

<mask-layer> = <mask-reference> <masking-mode>? || <position> [ / <bg-size> ]? ||
<repeat-style> || <geometry-box> || [ <geometry-box> | no-clip ] || <compositing-operator>

即：

mask: [mask-image] [mask-repeat] [mask-position] / [ mask-size]

和background属性类似，建议mask-size单独写出来：

mask: [mask-image] [mask-repeat] [mask-position]
mask-size: [mask-size]

上面我们列出的的仅是mask部分属性，在规范中还提供了其他的属性，这几个属性有点类似于CSS中的border属性，比如mask-border-source、mask-border-mode、mask-border-slice、mask-border-width、mask-border-outset、mask-border-repeat、mask-border等。另外还可以用于SVG，比如mask-type。

上面简单的介绍了CSS中mask的基本原理和使用规则，但我们今天的重点并不是来了解所有的属性，而是针对性的学习其属性之一，即mask-composite属性。如果你想了解更多有关于mask相关的知识，建议你花点时间阅读下列文章：

• 如何在CSS中使用遮罩
• CSS遮罩CSS3 mask/masks详细介绍
• CSS3 Mask 安利报告
• A Comprehensive Guide to Clipping and Masking in SVG
• CSS中的剪裁和遮罩
• 打破盒子模式的限制，使用Clip-Path创建响应式图形

mask-composite

mask-composite仅是CSS的mask的子属性之一。该属性的工作原理是什么？它有什么用？使用它的价值是什么？

如果将上述问题一一答出来之后，可以彻底让我们掌握mask-composite的原理和使用方式。@Ana Tudor新出的博文《Mask Compositing: The Crash Course》就详细介绍了这些，也称得上是mask-composite速成记。