mask是遮罩之意。在CSS里，mask属性支持用位图做遮罩。用于遮罩的位图，可以是PNG、GIF、webp、svg等具有透明区域的图片，因为，mask的工作原理是这样：用于遮罩的图片，该图片透明的部分所遮挡的目标区域将得不到呈现，反之，该图片任意非透明的部分所遮挡的目标区域则得到呈现。所以，遮罩图片如果没有透明区域，它对目标对象的遮罩没有意义、只在目标对象之上呈现它自己。

我在网上随便找一张来自摄图网的图片（450*300），它将作为HTML盒子的背景：

然后，我将用如下这张我网盘里的位图（200*200）遮挡上方的图片，它将充当遮罩位图：

我们先给HTML盒子做一个CSS样式：

.mybox {
	width: 450px;
	height: 300px;
	background: url('底图地址') no-repeat center/cover;
	mask: url('遮罩图地址') repeat-x -20px 10px / 240px 240px;
}

以上，我们给 .mybox 选择器添加了前面准备好的背景图片，其中的参数 no-repeat center/cover 是多余的，因为图片的尺寸和盒子的尺寸一致，我们这么做只是为了方便我们更换底图以及和下一行的mask属性语法做比较。

然后，我们使用了 mask 属性，略作比较就可以轻易看到，它的语法与 background 完全一样：用 url('图片') 语句给出图片地址；接着是 repeat 参数，mask位图重复与否的参数，这里用了水平方向重复即 repeat-x；再接着设定位置（mask-position），-20px 10px 表示水平方向往左偏移 20px、垂直方向往下偏移 10px，这是考虑位图与底图的和谐布局问题；最后，我们让位图以 240 * 240 的尺寸（mask-size）对底图进行遮罩，之所以这么设计，与遮罩位图的位置考量是一个道理。

然后，写出HTML代码，就可以看到效果了：

<div class="mybox"></div>

现在，我们应该可以理解：元素的 mask 属性通过使用有透明区域的图片，可以对元素的背景进行遮罩，位图透明的区域之下，元素背景不可见，反正，位图非透明的区域之下，元素背景可见。换言之，mask 属性用透明的区域遮盖背景、用非透明的区域呈现背景，从而达到特殊的遮盖目的。

mask 属性的应用场景应该是很广泛的，上例虽然不能给我们以完美的启发，但至少我们从中学会了一个全新的方法，剩下的只是想象力和创造力了。

应该注意的是，使用了mask属性的元素，默认情况下其周边属性样式如 border、outline、box-shadow 都将失效，原因是盒子外围都被遮罩了。我们上面的例子之所有边框，那是因为我给 mybox 加了一个外壳。

最后，给第二个盒子改变一下遮罩代码：

.mybox:nth-of-type(2) {
        mask: url('https://638183.freep.cn/638183/t23/btn/12f.png') no-repeat 100px center/75%;
}