CSS Masking - mask-image 属性

目录

    显示目录

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

CSS mask-image 属性

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

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

浏览器支持

注意：大多数浏览器仅对 CSS 提供部分支持 掩蔽。除了标准前缀之外，您还需要使用 -webkit- 前缀 大多数浏览器中的属性。

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

Property
mask-image 4.0 -webkit- 79.0 -webkit- 53.0 4.0 -webkit- 15.0 -webkit-

使用图像作为遮罩层

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

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

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

W3Schools.com

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

Cinque Terre

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

Cinque Terre

例子

这是源代码：

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

自己尝试一下 →

<!DOCTYPE html>
<html>
<head>
<style>
.mask1 {
  -webkit-mask-image: url(w3logo.png);
  mask-image: url(w3logo.png);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;    
}
</style>
</head>
<body>

<h1>The mask-image Property</h1>

<h3>An image with a mask layer image:</h3>
<div class="mask1">
<img src="img_5terre.jpg" alt="Cinque Terre" width="600" height="400">
</div>

<h3>Original image:</h3>
<img src="img_5terre.jpg" alt="Cinque Terre" width="600" height="400">

</body>
</html>

示例解释

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

mask-repeat 属性指定是否或如何 将重复蒙版图像。 不重复 值表示掩模图像不会重复（掩模图像将 只显示一次）。

另一个例子

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

Cinque Terre

例子

这是源代码：

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

自己尝试一下 →

<!DOCTYPE html>
<html>
<head>
<style>
.mask1 {
  -webkit-mask-image: url(w3logo.png);
  mask-image: url(w3logo.png);
}
</style>
</head>
<body>

<h1>The mask-image Property</h1>

<h3>An image with a mask layer image:</h3>
<div class="mask1">
<img src="img_5terre.jpg" alt="Cinque Terre" width="600" height="400">
</div>

<h3>Original image:</h3>
<img src="img_5terre.jpg" alt="Cinque Terre" width="600" height="400">

</body>
</html>

使用渐变作为遮罩层

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

线性渐变示例

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

Cinque Terre
 

例子

使用线性渐变作为遮罩层：

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

自己尝试一下 →

<!DOCTYPE html>
<html>
<head>
<style>
.mask1 {
  -webkit-mask-image: linear-gradient(black, transparent);
  mask-image: linear-gradient(black, transparent);
}
</style>
</head>
<body>

<h1>The mask-image Property</h1>

<h3>A linear gradient as a mask layer:</h3>
<div class="mask1">
<img src="img_5terre.jpg" alt="Cinque Terre" width="600" height="400">
</div>

<h3>Original image:</h3>
<img src="img_5terre.jpg" alt="Cinque Terre" width="600" height="400">

</body>
</html>

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

The Cinque Terre is a coastal area within Liguria, in the northwest of Italy. It lies in the west of La Spezia Province, and comprises five villages: Monterosso al Mare, Vernazza, Corniglia, Manarola, and Riomaggiore.

The Cinque Terre is a coastal area within Liguria, in the northwest of Italy. It lies in the west of La Spezia Province, and comprises five villages: Monterosso al Mare, Vernazza, Corniglia, Manarola, and Riomaggiore.

The Cinque Terre is a coastal area within Liguria, in the northwest of Italy. It lies in the west of La Spezia Province, and comprises five villages: Monterosso al Mare, Vernazza, Corniglia, Manarola, and Riomaggiore.

例子

使用线性渐变和文本遮罩作为遮罩层：

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

自己尝试一下→

<!DOCTYPE html>
<html>
<head>
<style>
p {
  font-size: 20px;
  padding: 20px;
  color: white;
}
.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);
}
</style>
</head>
<body>

<h1>The mask-image Property</h1>

<h3>A linear gradient as a mask layer:</h3>

<div class="mask1">
<p>The Cinque Terre is a coastal area within Liguria, in the northwest of Italy. It lies in the west of La Spezia Province, and comprises five villages: Monterosso al Mare, Vernazza, Corniglia, Manarola, and Riomaggiore.</p>

<p>The Cinque Terre is a coastal area within Liguria, in the northwest of Italy. It lies in the west of La Spezia Province, and comprises five villages: Monterosso al Mare, Vernazza, Corniglia, Manarola, and Riomaggiore.</p>

<p>The Cinque Terre is a coastal area within Liguria, in the northwest of Italy. It lies in the west of La Spezia Province, and comprises five villages: Monterosso al Mare, Vernazza, Corniglia, Manarola, and Riomaggiore.</p>
</div>

</body>
</html>

径向渐变示例

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

Cinque Terre

例子

使用径向渐变作为遮罩层（圆形）：

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

自己尝试一下 →

<!DOCTYPE html>
<html>
<head>
<style>
.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%);
}
</style>
</head>
<body>

<h1>The mask-image Property</h1>

<h3>A radial gradient as a mask layer (a circle):</h3>
<div class="mask2">
<img src="img_5terre.jpg" alt="Cinque Terre" width="600" height="400">
</div>

<h3>Original image:</h3>
<img src="img_5terre.jpg" alt="Cinque Terre" width="600" height="400">

</body>
</html>

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

Cinque Terre

例子

使用另一个径向渐变作为遮罩层（椭圆）：

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

自己尝试一下 →

<!DOCTYPE html>
<html>
<head>
<style>
.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%);
}
</style>
</head>
<body>

<h1>The mask-image Property</h1>

<h3>A radial gradient as a mask layer (an ellipse):</h3>
<div class="mask3">
<img src="img_5terre.jpg" alt="Cinque Terre" width="600" height="400">
</div>

<h3>Original image:</h3>
<img src="img_5terre.jpg" alt="Cinque Terre" width="600" height="400">

</body>
</html>

使用SVG作为遮罩层

SVG <mask> 元素可以在 用于创建遮罩效果的 SVG 图形。

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

Sorry, your browser does not support inline SVG.

例子

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>

自己尝试一下 →

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<h1>The mask-image Property</h1>

<h3>An SVG mask layer (formed as a triangle):</h3>
<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>

<h3>Original image:</h3>
<img src="img_5terre.jpg" alt="Cinque Terre" width="600" height="400">

</body>
</html>
Sorry, your browser does not support inline 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>

自己尝试一下→

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<h1>The mask-image Property</h1>

<h3>An SVG mask layer (formed as a star):</h3>
<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>

<h3>Original image:</h3>
<img src="img_5terre.jpg" alt="Cinque Terre" width="600" height="400">

</body>
</html>
Sorry, your browser does not support inline 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>

自己尝试一下→

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<h1>The mask-image Property</h1>

<h3>An SVG mask layer (formed as circles):</h3>
<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>

<h3>Original image:</h3>
<img src="img_5terre.jpg" alt="Cinque Terre" width="600" height="400">

</body>
</html>

CSS 屏蔽属性

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

mask-image

指定用作元素遮罩层的图像

mask-mode

指定遮罩层图像是否被视为亮度遮罩或 作为 alpha 蒙版

mask-origin

指定遮罩层的原点位置（遮罩位置区域） 图像

mask-position

设置遮罩层图像的起始位置（相对于遮罩层） 位置区）

mask-repeat

指定遮罩层图像的重复方式

mask-size

指定遮罩层图像的大小