CSS 属性

CSS mask 是一个简写属性，它在特定位置遮盖并显示图像，以部分或完全隐藏元素。

此属性是以下 CSS 属性的简写:

可能的值

  • none - 该值消除屏蔽效果。

  • <mask-reference> - 设置蒙版的图像源。请参阅mask-image。

  • <masking-mode> - 确定是alpha还是亮度mask 应应用于 mask-image 指定的 mask 引用。请参阅 mask-mode。

  • <position> - 确定每个定义的掩模的初始位置图像相对于 mask-origin 设置的遮罩位置图层。请参阅 mask-position。

  • <bg-size> - 定义遮罩的大小图像。请参阅 mask-size。

  • <repeat-style> - 确定遮罩图像的大小重复。请参阅 mask-repeat。

  • <geometry-box> - 单个 <geometry-box> 值设置蒙版原点和蒙版剪辑。如果存在两个值，则第一个值设置 mask-origin ，第二个值设置mask-clip。

  • <geometry-box> | no-clip - 确定受 mask-image 影响的区域。

  • <compositing -operator> - 该值指定要应用于当前遮罩层的合成操作。请参阅mask-composite。

适用于

所有元素。在 SVG 中，它适用于不包括 <defs> 元素和所有图形元素的容器元素

语法

关键字值

mask: none;

图像值

mask: url(shop.png);
mask: url(book.svg#star)

组合值

mask: url(heart.png) luminance; 
mask: url(heart.png) 40px 20px; 
mask: url(heart.png) 10px 10px / 100px 50px; 
mask: url(heart.png) repeat-y; 
mask: url(heart.png) border-box; 
mask: url(masks.svg#star) exclude;

CSS mask: none 

以下示例演示 mask: none 属性从元素中删除应用的遮罩效果 -

<html>
<head>
<style>
   .mask-none {
      width: 200px;
      height: 200px;
      background-image: url("/css/images/pink-flower.jpg");
      background-color: red;
      -webkit-mask: url(/css/images/heart.png);
      -webkit-mask-size: 100% 100%;
   }
</style>
</head>
<body>
   <h2>Image with masking effect</h2>
   <div class="mask-none"></div>
   <h2>Image without masking effect</h2>
   <div class="mask-none" style="mask:none"></div>
</body>
</html>

CSS mask: <mask-reference>

以下示例演示 mask: URL() 属性将图像源设置为 div 元素的遮罩层 -

<html>
<head>
<style>
   .mask-url {
   width: 200px;
   height: 200px;
   background-image: url("/css/images/pink-flower.jpg");
   background-size: cover;
   -webkit-mask: url(/css/images/heart.png);
   -webkit-mask-size: 100% 100%;
   }
</style>
</head>
<body>
   <div class="mask-url"></div>
</body>
</html>

CSS mask: <masking- mode>

以下示例演示了 -webkit-mask: Linear-gradient(red 20%, Pink 40%, green 60%, black 80%) luminance；属性，创建一个彩色渐变蒙版以及影响图像亮度的亮度值 -

<html>
<head>
<style>
   img {
      display: block;
      width: 200px; 
      height: 200px;
      -webkit-mask: linear-gradient(red 20%, pink 40%, green 60%, black 80%) luminance;
      -webkit-mask-position: center;
      -webkit-mask-repeat: no-repeat;
      -webkit-mask-size: 100% 100%;
   }
</style>
</head>
<body>
   <img src="/css/images/pink-flower.jpg" alt="pink-flower">
</body>
</html>

CSS mask: <position>

以下示例演示使用 url(/css/images /heart.png) 值和 40px 20px 值来设置蒙版位置 -

<html>
<head>
<style>
   .mask-container {
      width: 200px;
      height: 200px;
      background-image: url("/css/images/pink-flower.jpg");
      background-size: cover;
      -webkit-mask: url(/css/images/heart.png) 40px 20px;
      -webkit-mask-size: 100% 100%;
   }
</style>
</head>
<body>
   <div class="mask-container"></div>
</body>
</html>

CSS mask: <bg-size>

以下示例演示使用 url 的蒙版图像(/css/images/heart.png) 值和 10px 10px 值定位遮罩图像，100px 50px 设置遮罩的大小 -

<html>
<head>
<style>
   .mask-container {
      width: 200px;
      height: 200px;
      background-image: url("/css/images/pink-flower.jpg");
      background-size: cover;
      -webkit-mask: url(/css/images/heart.png) 10px 10px / 100px 50px;
      -webkit-mask-size: 100% 100%;
   }
</style>
</head>
<body>
   <div class="mask-container"></div>
</body>
</html>

CSS mask: <repeat-style>

以下内容示例演示了使用 url(/css/images/heart.png) 值的遮罩图像，repeat-y 值指示遮罩图像应垂直重复 -

<html>
<head>
<style>
   .mask-container {
      width: 200px;
      height: 200px;
      background-image: url("/css/images/pink-flower.jpg");
      background-size: cover;
      -webkit-mask: url(/css/images/heart.png) repeat-y;
      -webkit-mask-size: 50px;
      -webkit-mask-position: center;
   }
</style>
</head>
<body>
   <div class="mask-container"></div>
</body>
</html>

CSS mask: <geometry-box>

以下示例使用 url(/css/images/shop.png) 值演示遮罩图像，并且 border-box 值指示遮罩图像相对于元素的边框框（包括边框和填充）定位和调整大小 -

<html>
<head>
<style>
   .container {
      width: 250px;
      height: 200px;
      background-color: greenyellow;
      padding: 10px;
   }
   .masking-image {
      height: 120px;
      border: 20px solid red;
      padding: 10px;
      background-color: violet;

      -webkit-mask: url('/css/images/shop.png') border-box;
      -webkit-mask-size: cover;
      -webkit-mask-repeat: no-repeat;
   }
</style>
</head>
<body>
   <p>The image has a violet background, and the red border around it. The areas outside the border will remain visible.</h3>
   <div class="container"><div class="masking-image"></div></div>
</body>
</html>

CSS mask: <geometry-box> | no-clip

以下示例演示使用 url(/css/images/bookmark.png) 值的遮罩图像。

content-box 值指示遮罩图像的位置和大小是相对的到元素的内容框和 no-clip 值可防止遮罩图像被剪切到元素的内容框。

<html>
<head>
<style>
   .box {
      max-width: 300px;
      border: 3px solid blue;
   }
   .mask-container {
      background-color: gold;
      display: block;
      padding: 20px;
      width: 220px;
      height: 220px;
      border: 20px solid red;
      -webkit-mask: url(/css/images/bookmark.png) content-box no-clip;
      -webkit-mask-position: center center;
      -webkit-mask-repeat: repeat;
      -webkit-mask-size: 100px 100px;
   }
</style>
</head>
<body>
   <div class="box">
      <div class="mask-container">
         <img src="/css/images/pink-flower.jpg" alt="pink flower" width="100%">
      </div>
   </div>
</body>
</html>

CSS mask: 相关属性

以下是 CSS 列表与掩码相关的属性:

属性值
mask-clip定义受遮罩影响的元素区域。
mask-composite定义受遮罩影响的元素区域。
mask-image显示或隐藏特定区域元素的。
mask-position确定遮罩图像放置在元素上的位置。
mask-repeat图像沿水平轴、垂直轴、两个轴重复，或根本不重复。
mask-size定义遮罩图像的大小。
mask-origin定义遮罩图像的原点。
mask-mode定义是否由mask-给出的mask引用图像应被视为亮度或 Alpha 蒙版。
mask-border沿元素边框的边缘创建遮罩。
mask-border-mode指定蒙版边框中使用的混合模式。
mask-border-outset指定元素的遮罩边框距其边框框的距离。
mask-border-repeat设置如何调整源图像的边缘以适应元素蒙版边框的尺寸。
mask-border-slice将 mask-border-source 设置的图像划分为多个区域。
mask-border-source设置用于创建元素遮罩边框的源图像.
mask-border-width设置元素遮罩边框的宽度。