探索CSS Masking模块：Masking

探索CSS Masking模块主要分为 Clipping 和 Masking 两个部分，在上一节中，花了很大的篇幅介绍了 Clipping 相关的特性，今天接着来学习或者聊聊 Masking 相关的知识点。

从上一节中我们知道，在Masking中有一个遮罩层，这个遮罩层是一个图像，该层也被称为 遮罩模式 ，主要有 高亮 和 Alpha 两种模式。其中Alpha模式带有 alpha 通道的图像， alpha 通道包含在每个像素数据中的透明信息。最简单的示例就是带有黑色和透明区域的PNG图像，其中 黑色部分 将会显示，透明区域内容将会被隐藏。

高亮模式使用图像的 亮度 值作为遮罩值，如下图所示，遮罩层白色区域将会显示出来，透明区域将会被隐藏：

最终的效果如下：

接下来，一起来探探Masking相关的特性和使用。

CSS mask

CSS中的 mask 分成两大部分，其中第一部分类似于 background ，而另一部分类似于 border-image 。先来看 mask 和 background 属性的对照表：

从上表中可以看出 mask 中有 六 属性和 background 相似，而且和使用方式都相似。接着再来看另一部分 mask-border 和 border-image 的对照：

同样的， mask-border 和 border-image 在语法上是非常相似的，也就是说，只要你理解了 border-image 的使用对于 mask-border 的使用也不会有任何的难度。

mask的使用

先从语法规则开始， mask 的语法规则很简单：

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

简单的解释一下：

<mask-reference>

<mask-reference> 用来指定遮罩图像源，主要值有 none 、 <image> 和 <mask-source> 。简单地说， 用来指定遮罩图片的路径，即 mask-image 。

如果取值为 none 时，表示作为透明的黑色图像层计算。如果计算的值不是 none ，就会创建一个叠加上下文（Stacking Context），这与CSS的 opacity 取值为非 1 所起的效果相似。

注意， <mask-reference> 取值为 none 时可能会影响 mask 的操作，具体取决于 mask-composite 指定合成值。

而 <image> 在CSS中可以用于很多属性中，比如 background-image 、 list-style-image 、 cursor 等。在某些情况下，图像是无效的，例如 <url> 指向的资源不是有效的图像格式。无效的图像被渲染为没有内在维度的纯色“透明”图像。然而，无效图像在某些上下文中具有特殊的行为，例如 image() 函数。

<mask-source> 等于 <url> 。他可以指向的是SVG中的 <mask> 元素，比如 url(commonmasks.svg#mask) 或者是 url() 指向的图像。

看上去感觉好复杂，其实没有这么复杂，你可以将其当作是 background-image 。比如可以是一个 png 格式的图片：

body {
    mask-image: url(mask.png);
}

也可以是一个使用渐变绘制的图像：

body {
    mask-image: linear-gradient(to right, black 0%, transparent 100%);
}

还可以是 .svg 中某一个带 id 的 <mask> 元素：

body {
    mask-image: url(resources.svg#maskEleId);
}

当然也可以是一个 none 值：

body {
    mask-image: none;
}

当取值为none时，就好比没有使用任何遮罩图一样，但有时还是取值于mask-composite的值（合成）。

更简单地说， mask-image 可以通过下面的方式引用图像：

<url> | <image()> | <image-set()> | <element()> | <cross-fade()> | <gradient>

<mask-mode>

<mask-mode> 对应的就是 mask-mode 属性，用来设置遮罩图像的模式，主要有高亮（ Luminance ）和透明通道（ Alpha ）两种模式。其取值主要有： alpha 、 luminance 和 auto 。

高亮模式（Luminance）

还是用一张图来描述，这样描述会更清晰一些，假设我们有一张下面这样的遮罩图像：

如果使用上图作为遮罩图，那么 白色区域（高亮） 可见， 透明区域 不可见。也就是说， mask-mode 取值为 luminance 时，将会运图遮罩图像的亮度值，而不是使用图像的透明通道值作为遮罩值 。

当使用亮度遮罩模式时，会先计算颜色通道的亮度，然后计算出的亮度值乘以相应的 alpha 值，从颜色通道值中计算出给定的遮罩模式的值。

亮度遮罩模式可以包含 任何颜色 ，而不仅仅是 白色 。亮度值然后由遮罩的 RGB 值和亮度系数，比如： luma = (0.2126 * R + 0.7152 * G + 0.0722 * B) 。确定对象的透明度，然后乘以 alpha 通道对象的亮度值和遮罩的 alpha 通道值。

所以，如果你有一个彩色的图像，它有一些完全透明的区域，元素不会显示图像在哪里是透明的，但是当图像的 alpha 值为 1 时，遮罩的值取决于使用的颜色（每个像素）。比如下面这个示例：

目前只有在Firefox Nightly能看到 mask-mode 效果，比如下图是 mask-mode 取值为 luminance 的效果：

如上例所示， mask-image 通过不同的颜色以不同的方式显示。来看一个录屏，可能体感会更强一些：

如果上面录屏效果不佳，可以将示例在Firefox Nightly浏览器查看，并且通过调试器修改mask-image中linear-gradient()中的颜色。

Alpha模式

Alpha遮罩模式是采用具有 alpha 通道的图像，其中 alpha 值用来遮罩的值。同样拿张图来描述：

上图是一张带有 黑色 和透明区域的PNG图像。遮罩图像 黑色 部分将会显示（ alpha 的值是 1 ）， 透明区域 （ alpha 的值为 0 ）内容将会隐藏。

在图形学中， alpha 通道是每个像素数据的一部分，用于透明信息。 alpha 通道在遮罩中被广泛使用。它指定两个像素重叠时，一个像素的颜色应该如何与另一个像素全并。图像的不同部分将具有不同的透明度级别，这取决于你希望遮罩元素显示的透明度。

就上图而言，黑色区域的 alpha 值为 1 ，透明区域的 alpha 值为 0 。

当使用带有 alpha 通道的图像作为 alpha 的遮罩模式时，图像为黑色（完全不透明）的区域将是元素的可见区域，而图像的透明区域将是元素不可见的区域。半透明区域将显示具有一定透明的元素。

显示具有不同 alpha 值的图像如何影响运用了Alpha遮罩模式的元素的最佳方案是使用一个渐变图像。一个从 #000 到 transprent 的渐变。这个遮罩所应用的元素在渐变为不透明的地方是完全可见的，在 alpha 通道范围为 0 到 1 的地方是半透明的，在渐变为透明的地方是不可见的。

支持 mask-mode 的浏览器将看到的效果如下图所示：

无论通道模式（ mask-mode ）使用哪种方式 alpha ，还是 luminance ，计算遮罩值的过程都先假定遮罩的内容是一个 四通道 RGBA 图形对象。对于其他类型的图形对象，需要进行如下特殊处理：

• 对于遮罩中使用的三通道 RGB 图形对象，效果就好像该对象被转换成一个四通道 RGBA 图像，其 alpha 通道被设置为 1
• 对于遮罩中使用的一通道图像，效果就好像该对象被转换成一个四通道 RGBA 图像，只不过用于计算三个颜色通道和阿尔法通道都被设置为 1

auto

mask-mode 取值为 auto 时得到的效果和 mask-image 是什么类型有一定的关系。

• 如果是 <mask-source> 类型，那么 mask-mode 采用的模式将是高亮（ luminance ）模式
• 如果是 <image> 类型，那么 mask-mode 采用的模式将是 alpha 模式

另外，如果遮罩图形中使用了 mask-type 给元素设置了遮罩模式为 alpha （比如 <mask> 元素中设置了 mask-type="alpha" ），而在引用该遮罩图形时显式的将 mask-mode 设置了 luminance 。那么 mask-mode 将会替代元素中 mask-type 设置的遮罩模式：

<mask id="SVGMask" mask-type="alpha" maskContentUnits="objectBoundingBox">
    <radialGradient id="radialFill">
        <stop stop-color="white" offset="0"/>
        <stop stop-color="black" offset="1"/>
    </radialGradient>
    <circle fill="url(#radialFill)" cx="0.5" cy="0.5" r="0.5"/>
</mask>

<style>
    rect {
        mask-image: url(#SVGMask);
        mask-mode: luminance;
    }
</style>

<rect width="200" height="200" fill="green"/>

<position>

<position> 对应的即是 mask-position 属性，其使用和CSS中的 background-position 相似，主要用于 设置遮罩图像（ mask-image ）在元素中的位置 。而 mask-position 设置遮罩图像位置是相对于 mask-origin 的初始位置的。

来看一个示例， mask-position 采用不同的值得到的效果将不一样：

上面我们看到的是CSS中 background-position 中关键词的一些使用，其实除了使用 top 、 right 、 bottom 和 left 这样的关键词之外，还可以使用百分比或者其他的任何长度单位。另外， mask-position 也可以相对于左上角的其他角 。比如，相对底部 10px ，右侧 3em ，我们可以这样来写：

mask-position: right 3em bottom 10px;

对于 mask-position 取值为百分比的时候，其计算相对而言还是较为复杂的，可以看看