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 | 指定蒙版层图像的大小 |
