CSS 蒙版
使用 CSS 蒙版，您可以创建一个蒙版层叠加在元素上来部分或全部隐藏该元素的一部分。
CSS mask-image 属性
CSS mask-image 属性指定蒙版层的图像。
蒙版层的图像可以是 PNG 图像、SVG 图像、CSS 渐变，或SVG <mask> 元素。
浏览器支持
下表中的数字表示该属性完全支持的第一个浏览器版本。
后面带有 -webkit- 的数字表示需要加前缀才能使用的第一个版本。
| 属性 | |||||
|---|---|---|---|---|---|
| mask-image | 120 | 120 | 53 | 15.4 | 15 -webkit- |
使用图像作为蒙版层
要使用 PNG 或 SVG 图像作为蒙版层，请使用 url() 值来传入蒙版层图像。
蒙版图像需要有透明或半透明的区域。黑色表示完全透明。
这是我们将要使用的蒙版图像（一个 PNG 图像）
这是意大利五渔村的一张图片
现在，我们将蒙版图像（上面这张 PNG 图像）应用为意大利五渔村图片的蒙版层。
示例
这是源代码
.mask1 {
-webkit-mask-image: url(w3logo.png);
mask-image: url(w3logo.png);
mask-repeat: no-repeat;
}
自己动手试一试 »
示例解释
mask-image 属性指定用作元素蒙版层的图像。
mask-repeat 属性指定蒙版图像是否以及如何重复。no-repeat 值表示蒙版图像不会重复（蒙版图像只会显示一次）。
另一个示例
如果省略 mask-repeat 属性，蒙版图像将会在五渔村的图片上重复显示。
使用渐变作为蒙版层
CSS 线性渐变和径向渐变也可以用作蒙版图像。
线性渐变示例
在这里，我们使用线性渐变作为图像的蒙版层。这个线性渐变从顶部（黑色）到底部（透明）
示例
使用线性渐变作为蒙版层
.mask1 {
-webkit-mask-image: linear-gradient(black, transparent);
mask-image: linear-gradient(black, transparent);
}
自己动手试一试 »
在这里，我们结合文本蒙版使用线性渐变作为图像的蒙版层。
五渔村是意大利西北部利古里亚地区的一个沿海区域。它位于拉斯佩齐亚省西部，包含五个村庄：蒙特罗索、韦尔纳扎、科尔尼利亚、马纳罗拉和里奥马焦雷。
五渔村是意大利西北部利古里亚地区的一个沿海区域。它位于拉斯佩齐亚省西部，包含五个村庄：蒙特罗索、韦尔纳扎、科尔尼利亚、马纳罗拉和里奥马焦雷。
五渔村是意大利西北部利古里亚地区的一个沿海区域。它位于拉斯佩齐亚省西部，包含五个村庄：蒙特罗索、韦尔纳扎、科尔尼利亚、马纳罗拉和里奥马焦雷。
示例
结合文本蒙版使用线性渐变作为蒙版层
.mask1 {
max-width: 600px;
height: 350px;
overflow-y: scroll;
background: url(img_5terre.jpg) no-repeat;
-webkit-mask-image: linear-gradient(black, transparent);
mask-image: linear-gradient (black, transparent);
}
自己动手试一试 »
径向渐变示例
在这里，我们使用径向渐变（圆形）作为图像的蒙版层。
示例
使用径向渐变作为蒙版层（圆形）
.mask2 {
-webkit-mask-image: radial-gradient(circle, black 50%, rgba(0, 0, 0, 0.5) 50%);
mask-image: radial-gradient(circle, black 50%, rgba(0, 0, 0, 0.5) 50%);
}
自己动手试一试 »
在这里，我们使用径向渐变（椭圆形）作为图像的蒙版层。
示例
使用另一个径向渐变作为蒙版层（椭圆形）
.mask3 {
-webkit-mask-image: radial-gradient(ellipse, black 50%, rgba(0, 0, 0, 0.5) 50%);
mask-image: radial-gradient(ellipse, black 50%, rgba(0, 0, 0, 0.5) 50%);
}
自己动手试一试 »
使用 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 蒙版属性
| 属性 | 描述 |
|---|---|
| mask-clip | 指定哪个区域受蒙版图像影响 |
| mask-composite | 指定一个复合操作，用于将当前蒙版层与它下面的蒙版层进行组合 |
| mask-image | 指定用作元素蒙版层的图像 |
| mask-mode | 指定蒙版层图像被视为亮度蒙版还是 Alpha 蒙版 |
| mask-origin | 指定蒙版层图像的起始位置（蒙版位置区域） |
| mask-position | 设置蒙版层图像的起始位置（相对于蒙版位置区域） |
| mask-repeat | 指定蒙版层图像的重复方式 |
| mask-size | 指定蒙版层图像的大小 |
