用CSS实现遮罩效果，您可以创建一个遮罩层并将其放置在元素上，以部分或完全隐藏元素的某些部分。

mask-image 属性

CSS mask-image 属性指定遮罩层图像。

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

浏览器支持

下表中的数字表示完全支持该属性的第一个浏览器版本。

带有 -webkit- 前缀的数字表示支持该前缀的第一个版本。

使用图像作为遮罩层

要将 PNG 或 SVG 图像用作遮罩层，请使用 url() 值传递遮罩层图像。

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

这是我们将使用的遮罩图像（PNG 图像）：

这是来自意大利五渔村的图像：

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

实例

以下是源代码：

.mask1{-webkit-mask-image:url(w3.png);mask-image:url(w3logo.png);mask-repeat: no-repeat;}

例子解释

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

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

另一个实例

如果我们省略 mask-repeat 属性，遮罩图像将重复显示在整个五渔村图像上：

实例

以下是源代码：

.mask1{-webkit-mask-image:url(w3logo.png);mask-image:url(w3logo.png);}

使用渐变作为遮罩层

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(wuhan.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="wuhan.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="wuhan.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="wuhan.jpg" mask="url(#svgmask3)"></image> </svg>

優(yōu)網(wǎng)科技秉承"專業(yè)團(tuán)隊、品質(zhì)服務(wù)" 的經(jīng)營理念，誠信務(wù)實的服務(wù)了近萬家客戶，成為眾多世界500強、集團(tuán)和上市公司的長期合作伙伴！

優(yōu)網(wǎng)科技成立于2001年，擅長網(wǎng)站建設(shè)、網(wǎng)站與各類業(yè)務(wù)系統(tǒng)深度整合，致力于提供完善的企業(yè)互聯(lián)網(wǎng)解決方案。優(yōu)網(wǎng)科技提供PC端網(wǎng)站建設(shè)（品牌展示型、官方門戶型、營銷商務(wù)型、電子商務(wù)型、信息門戶型、微信小程序定制開發(fā)、移動端應(yīng)用（手機站、APP開發(fā)）、微信定制開發(fā)（微信官網(wǎng)、微信商城、企業(yè)微信）等一系列互聯(lián)網(wǎng)應(yīng)用服務(wù)。