Css 简明教程

CSS Masking - mask

CSS mask 是一个缩写属性，用于遮罩和显示处于特定位置图像，以部分或完全隐藏元素。

CSS mask is a shorthand property that masks and displays an image at a particular position to partially or completely hide an element.

此属性是下列 CSS 属性的速记：

This property is a shorthand for the following CSS properties:

Possible Values

none − This value removes the masking effect.
<mask-reference> − Sets the image source for the mask. Refer mask-image.
<masking-mode> − Determines whether an alpha or luminance mask should be applied to the mask reference specified by mask-image. Refer mask-mode.
<position> − Determines the initial position for each defined mask image relative to the mask position layer set by mask-origin. Refer mask-position.
<bg-size> − Defines the size of the mask image. Refer mask-size.
<repeat-style> − Determines how the mask image are repeated. Refer mask-repeat.
<geometry-box> − A single <geometry-box> value sets both mask-origin and mask-clip. If two values are present, the first sets the mask-origin and second mask-clip.
<geometry-box> | no-clip − Determines the area affected by the mask-image.
<compositing-operator> − This value specifies the compositing operation to be applied on the current mask layer. Refer mask-composite.

Applies to

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

All elements. In SVG, it applies to container elements excluding the <defs> element and all graphics elements

Syntax

Keyword Values

mask: none;

Image Values

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

Combined Values

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 Value

以下示例演示了 mask: none 属性从元素中删除已应用的蒙版效果 −

The following example demonstrates that the mask: none property removes applied masking effect from the element −

<html>
<head>
<style>
   .mask-none {
      width: 200px;
      height: 200px;
      background-image: url("images/pink-flower.jpg");
      background-color: red;
      -webkit-mask: url(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 元素的蒙版层 −

The following example demonstrates that the mask: URL() property sets the image source as a mask layer for the div element −

<html>
<head>
<style>
   .mask-url {
   width: 200px;
   height: 200px;
   background-image: url("images/pink-flower.jpg");
   background-size: cover;
   -webkit-mask: url(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; 属性如何创建彩色渐变蒙版以及影响图片亮度的亮度值 −

The following example demonstrates that the -webkit-mask: linear-gradient(red 20%, pink 40%, green 60%, black 80%) luminance; property, creates a colorful gradient mask along with luminance value that affects the brightness of the image −

<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="images/pink-flower.jpg" alt="pink-flower">
</body>
</html>

CSS mask - <position>

以下示例演示了使用 url(images/heart.png) 值和 40px 20px 值设置蒙版位置的蒙版图片 −

The following example demonstrates the mask image using the url(images/heart.png) value and the 40px 20px values to set the position of the mask −

<html>
<head>
<style>
   .mask-container {
      width: 200px;
      height: 200px;
      background-image: url("images/pink-flower.jpg");
      background-size: cover;
      -webkit-mask: url(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(images/heart.png) 值和 10px 10px 值设置蒙版图片的位置，以及 100px 50px 设置蒙版的大小 −

The following example demonstrates the mask image using the url(images/heart.png) value and 10px 10px values position the mask image, and 100px 50px sets the size of the mask −

<html>
<head>
<style>
   .mask-container {
      width: 200px;
      height: 200px;
      background-image: url("images/pink-flower.jpg");
      background-size: cover;
      -webkit-mask: url(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(images/heart.png) 值和 repeat-y 值的蒙版图片，表明蒙版图片应垂直重复 −

The following example demonstrates the mask image using the url(images/heart.png) value and repeat-y value indicates that the mask image should be repeated vertically −

<html>
<head>
<style>
   .mask-container {
      width: 200px;
      height: 200px;
      background-image: url("images/pink-flower.jpg");
      background-size: cover;
      -webkit-mask: url(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(images/shop.png) 值和 border-box 值的蒙版图片，表明蒙版图片的位置和大小相对于元素的 border-box（包括边框和内边距） −

The following example demonstrates the mask image using the url(images/shop.png) value and border-box value indicates that mask image is positioned and sized relative to the element’s border-box including border and padding −

<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('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(images/bookmark.png) 值的蒙版图片。

The following example demonstrates the mask image using the url(images/bookmark.png) value.

content-box 值表明蒙版图片的位置和大小相对于元素的 content-box，且 no-clip 值可防止蒙版图片被裁剪到元素的 content box。

The content-box value indicates that mask image is positioned and sized relative to the element’s content-box and no-clip value prevents the mask image from being clipped to the element’s content box.

<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(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="images/pink-flower.jpg" alt="pink flower" width="100%">
      </div>
   </div>
</body>
</html>