CSS 掩蔽
使用 CSS 遮罩，您可以创建一个遮罩层放置在元素上方，以部分或全部隐藏元素的各个部分。
CSS mask-image 属性
CSS mask-image 属性指定遮罩层图像。
遮罩层图像可以是 PNG 图像、SVG 图像、 CSS 渐变或 SVG<mask> 元素.
浏览器支持
笔记： 大多数浏览器仅部分支持 CSS 屏蔽。在大多数浏览器中，除了标准属性外，您还需要使用 -webkit- 前缀。
下表中的数字指定了第一个完全支持该属性的浏览器版本。后跟 -webkit- 的数字指定了第一个使用前缀的版本。
| 财产 | |||||
|---|---|---|---|---|---|
| 遮罩图像 | 4.0 -webkit- | 79.0-webkit- | 53.0 | 4.0 -webkit- | 15.0-webkit- |
使用图像作为遮罩层
要使用 PNG 或 SVG 图像作为遮罩层，请使用 url() 值传入遮罩层图像。
遮罩图像需要有透明或半透明区域。黑色表示完全透明。
以下是我们将使用的遮罩图像（PNG 图像）：
这是意大利五渔村 (Cinque Terre) 的图片：
现在，我们将蒙版图像（上面的 PNG 图像）应用为意大利五渔村图像的蒙版层：
例子
以下是源代码：
.掩码1 {
-webkit-mask-image：url（w3logo.png）；
遮罩图像：url(w3logo.png)；
-webkit-mask-repeat：不重复；
掩码重复：不重复；
}
亲自尝试 »
示例解释
这 mask-image 属性指定用作元素遮罩层的图像。
这 mask-repeat 属性指定是否或如何重复蒙版图像。no-repeat 值表示遮罩图像不会重复（遮罩图像只会显示一次）。
另一个例子
如果我们省略 mask-repeat 属性，蒙版图像将在意大利五渔村的整个图像上重复出现：
使用渐变作为遮罩层
CSS 线性和径向渐变也可以用作蒙版图像。
线性渐变示例
这里，我们使用线性渐变作为图像的遮罩层。此线性渐变从顶部（黑色）到底部（透明）：
在这里，我们使用线性渐变和文本蒙版作为图像的蒙版层：
五渔村是意大利西北部利古里亚的一个沿海地区。 它位于拉斯佩齐亚省西部，由五个村庄组成：蒙特罗索阿尔马雷、韦尔纳扎、科尔尼利亚、马纳罗拉和里奥马焦雷。
五渔村是意大利西北部利古里亚的一个沿海地区。 它位于拉斯佩齐亚省西部，由五个村庄组成：蒙特罗索阿尔马雷、韦尔纳扎、科尔尼利亚、马纳罗拉和里奥马焦雷。
五渔村是意大利西北部利古里亚的一个沿海地区。 它位于拉斯佩齐亚省西部，由五个村庄组成：蒙特罗索阿尔马雷、韦尔纳扎、科尔尼利亚、马纳罗拉和里奥马焦雷。
例子
使用线性渐变和文本蒙版作为蒙版层：
.掩码1 {
最大宽度：600px；
高度：350px；
溢出-y：滚动；
背景：url(img_5terre.jpg) 不重复；
-webkit-mask-image：线性渐变（黑色，透明）；
遮罩图像：线性渐变（黑色，透明）；
}
亲自尝试 »
径向渐变示例
在这里，我们使用径向渐变（形状为圆形）作为图像的遮罩层：
例子
使用径向渐变作为蒙版层（一个圆圈）：
.掩码2 {
-webkit-mask-image：径向渐变（圆圈，黑色 50%，rgba（0，0，0，0.5）50%）；
遮罩图像：径向渐变（圆形，黑色 50%，rgba（0，0，0，0.5）50%）；
}
亲自尝试 »
在这里，我们使用径向渐变（形状为椭圆）作为图像的蒙版层：
例子
使用另一个径向渐变作为蒙版层（椭圆）：
.mask3 {
-webkit-mask-image：径向渐变（椭圆，黑色 50%，rgba（0，0，0，0.5）50%）；
遮罩图像：径向渐变（椭圆，黑色 50%，rgba（0，0，0，0.5））；
}
亲自尝试 »
使用 SVG 作为遮罩层
SVG <mask> 元素可以在 SVG 图形内部使用来创建遮罩效果。
这里我们使用 SVG <mask> 元素为我们的图像创建不同的遮罩层：
例子
SVG 遮罩层（呈三角形）：
<svg width="600" height="400">
<mask id="svgmask1">
<polygon fill="#ffffff" points="200 0, 400 400, 0 400"></polygon>
</mask>
<image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="img_5terre.jpg" mask="url(#svgmask1)"></image>
</svg>
亲自尝试 »
例子
SVG 遮罩层（呈星形）：
<svg width="600" height="400">
<mask id="svgmask2">
<polygon fill="#ffffff" points="100,10 40,198 190,78 10,78 160,198"></polygon>
</mask>
<image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="img_5terre.jpg" mask="url(#svgmask2)"></image>
</svg>
亲自尝试 »
例子
SVG 遮罩层（呈圆形）：
<svg width="600" height="400">
<mask id="svgmask3">
<circle fill="#ffffff" cx="75" cy="75" r="75"></circle>
<circle fill="#ffffff" cx="80" cy="260" r="75"></circle>
<circle fill="#ffffff" cx="270" cy="160" r="75"></circle>
</mask>
<image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="img_5terre.jpg" mask="url(#svgmask3)"></image>
</svg>
亲自尝试 »
CSS 掩码属性
下表列出了所有 CSS 遮罩属性：
| 财产 | 描述 |
|---|---|
| 遮罩图像 | 指定用作元素遮罩层的图像 |
| 掩码模式 | 指定遮罩层图像是否被视为亮度遮罩或 alpha 遮罩 |
| 掩码来源 | 指定遮罩层图像的原点位置（遮罩位置区域） |
| 掩膜位置 | 设置遮罩层图片的起始位置（相对于遮罩位置区域） |
| 掩码重复 | 指定遮罩层图像的重复方式 |
| 遮罩尺寸 | 指定遮罩层图像的大小 |
