CSS 遮罩

通过 CSS 遮罩，您可以创建一个遮罩层来放置在元素上，以部分或完全隐藏元素的某些部分。

CSS mask-image 属性

CSSmask-image属性指定遮罩层图片。

遮罩层图片可以是PNG图片、SVG图片、CSS渐变，或一个SVG <mask> 元素。

浏览器支持

笔记：大多数浏览器仅部分支持 CSS 屏蔽。在大多数浏览器中，除了标准属性之外，您还需要使用 -webkit- 前缀。

下表中的数字指定完全支持该属性的第一个浏览器版本。 -webkit- 后面的数字指定使用前缀的第一个版本。

使用图片作为遮罩层

要使用 PNG 或 SVG 图片作为遮罩层，请使用 url() 值传入遮罩层图片。

遮罩图片需要有透明或半透明区域。黑色表示完全透明。

这是我们将使用的蒙版图片（PNG 图片）：

这是意大利五渔村的图片：

现在，我们应用遮罩图片（上面的 PNG 图片）作为意大利五渔村图片的遮罩层：

示例解释

这个mask-image属性指定用作元素的遮罩层的图片。

这个mask-repeat属性指定是否或如何重复蒙版图片。这no-repeat值表示遮罩图片不会重复（遮罩图片只会显示一次）。

另一个例子

如果我们省略mask-repeat属性，遮罩图片将在意大利五渔村的整个图片上重复：

使用渐变作为遮罩层

CSS 线性和径向渐变也可以用作遮罩图片。

线性渐变示例

在这里，我们使用线性渐变作为图片的掩模层。该线性渐变从顶部（黑色）到底部（透明）：

 

在这里，我们使用线性渐变和文本遮罩作为图片的遮罩层：

径向渐变示例

在这里，我们使用径向渐变（形状为圆形）作为图片的掩模层：

在这里，我们使用径向渐变（形状为椭圆形）作为图片的掩模层：

使用SVG作为遮罩层

SVG<mask>元素可以在 SVG 图形内部使用来创建遮罩效果。

这里我们使用SVG<mask>元素为我们的图片创建不同的遮罩层：

CSS 屏蔽属性

下表列出了所有 CSS 屏蔽属性：