CSS تايبر

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

mask-image 属性

CSS zhaomao tu xiang 属性指定遮罩层图像。

遮罩层图像可以是 PNG 图像、SVG 图像、CSS Gradient 或 SVG 元素。

浏览器支持

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

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

使用图像作为遮罩层

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

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

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

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

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

实例

Xia men shi yuan hua mian:

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

亲自试一试

li shi jie shi

zhaomao tu xiang xingshi zhi ding zuo wei yuan su zhaomao ceng de tu xiang.

zhaomao chong fu xingshi zhi ding zhaomao tu xiang shi fu chu xian huo ru he fu chu xian. no-repeat zhi wei biao shi zhaomao tu xiang bu fu chu xian (zhaomao tu xiang zhi hui xian shi yi ci).

gei ta gei shi li

Ri guo women sheng lue zhaomao chong fu xingshi, zhaomao tu xiang jiang zong fu xian xia ge wu yu cun tu xiang shang:

实例

Xia men shi yuan hua mian:

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

亲自试一试

a yin gudian zhi zhaozhao ceng:

CSS xianxing he jingxiang yin gudian ye keyi zuo wei zhaomao tu xiang.

yin gudian shi li

Zai zhe li, women shi yong yin gudian zhi zhaozhao ceng wei tu xiang de zhaozhao ceng. Ci yin gudian shun zhi deng zuo (hei se) dao di bu (tou ming):

实例

a yin gudian zhi zhaozhao ceng:

.mask1 {
  -webkit-mask-image: linear-gradient(black, transparent);
  mask-image: linear-gradient(black, transparent);
}

亲自试一试

Zai zhe li, women shi yong yin gudian he wenben zhaozhao zhi zhaozhao ceng wei tu xiang de zhaozhao ceng:

实例

a yin gudian he wenben zhaozhao zhi zhaozhao ceng:

.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);
}

亲自试一试

yin gudian shi li

Zai zhe li, women shi yong yin gudian (xingzhang wei yuanxing) zhi zhaozhao ceng wei tu xiang de zhaozhao ceng:

实例

a yin gudian zai xingzhang zhi zhaozhao ceng (yuanxing):

.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 元素可以在 SVG 图形内部使用，以创建遮罩效果。

在这里，我们使用 SVG 元素为图像创建不同的遮罩层：

实例

一个 SVG 遮罩层（形状为三角形）：

<svg width="600" height="400">
  
    
  
  

亲自试一试

实例

一个 SVG 遮罩层（形状为星形）：

<svg width="600" height="400">
  
    
  
  

亲自试一试

实例

SVG ɗauɗi (ɗauɗi kaiyawa):

<svg width="600" height="400">
  <mask id="svgmask3">
    <circle fill="#ffffff" cx="75" cy="75" r="75"></circle>
    
    
  
  

亲自试一试