CSS遮罩

WebKit现在支持CSS中的alpha遮罩。遮罩允许您使用一个图案覆盖盒子的内容，该图案可用于在最终显示中剔除盒子的部分内容。换句话说，您可以根据图像的alpha值来裁剪出复杂的形状。

这里是《极速赛车手》电影预告片的截图，它被裁剪成了Safari指南针图标的形状。这实际上是将一个遮罩应用到了<video>元素。

我们引入了新的属性，为Web设计师提供了大量控制这些遮罩及其应用方式的能力。这些新属性类似于已存在的 background 和 border-image 属性。

-webkit-mask (background)
-webkit-mask-attachment (background-attachment)
-webkit-mask-clip (background-clip)
-webkit-mask-origin (background-origin)
-webkit-mask-image (background-image)
-webkit-mask-repeat (background-repeat)
-webkit-mask-composite (background-composite)
-webkit-mask-box-image (border-image)

使用遮罩会创建一个堆叠上下文（类似于 opacity 和 transforms 的工作方式）。因此，遮罩会覆盖子元素及其所有后代元素，并且至少会剔除对象边框盒（border box）以外的所有内容。

从Web设计师的角度来看，可以把遮罩想象成是按照盒子的背景和 border-image 的构建方式来构建的。多个背景相互堆叠（可能重叠），并有自己的平铺和裁剪规则。然后，border-image 可能被拉伸或平铺在背景之上。

将所有遮罩图像组合、平铺、拉伸等处理后形成的最终结果图像，就成为了用于裁剪内容的遮罩。遮罩中alpha值为0意味着不应绘制任何内容。alpha值为1意味着内容应正常显示。介于两者之间的值会导致部分透明。

一个关键区别在于mask-box-image与其对应的 border-image 属性不同，它不会尝试适应边框宽度。它只会未经缩放地渲染角部，并将自身平铺/拉伸到边框盒内，而不考虑边框本身。这使您可以在没有边框的元素（通常是图像或视频元素）上轻松使用九宫格图像效果作为遮罩。

这里有两个示例图像。我们想要应用遮罩的源图像，以及我们将用作遮罩的图像。

我们可以通过简单地这样做来在图像元素上放置遮罩

<img src="kate.png" style="-webkit-mask-box-image: url(mask.png) 75 stretch;">

结果如下所示

CSS渐变也可以用作遮罩图像源。在以下示例中，使用线性渐变来实现淡出效果。例如

<img src="kate.png" style="-webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)))">

遮罩遵循对象的 border-radius 曲线。我们可以在前面的例子中添加 border-radius，以实现带有圆角的渐变淡出效果。

<img src="kate.png" style="-webkit-border-radius: 10px; -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)))">

SVG图像可以用作遮罩。例如，一个部分透明的圆形

可以像这样作为遮罩应用

<img src="kate.png" style="-webkit-mask-image: url(circle.svg)">

最终结果如下所示

在构建遮罩时，多背景和 border-image 语法的全部强大功能都可供您使用！

像往常一样，请在评论中留下反馈，并在发现任何问题时在 http://bugs.webkit.org/ 提交错误报告。