Css 简明教程

CSS Masking - mask

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

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

Possible Values

none − 此值会移除遮罩效果。
<mask-reference> − 设置蒙版的图片源。参考 mask-image 。
<masking-mode> − 确定应将 Alpha 或亮度蒙版应用到由 mask-image 指定的蒙版参考。参考 mask-mode 。
<position> − 确定由 mask-origin 设置的蒙版位置层相对于每个已定义蒙版图片的初始位置。参考 mask-position 。
<bg-size> − 定义蒙版图片的大小。参考 mask-size 。
<repeat-style> − 确定如何重复蒙版图片。参考 mask-repeat 。
<geometry-box> − 一个 <geometry-box> 值设置 mask-origin 和 mask-clip。如果存在两个值，则第一个值设置 mask-origin ，第二个值设置 mask-clip 。
<geometry-box> | no-clip − 确定受 mask-image 影响的区域。
<compositing-operator> − 此值指定对当前蒙版层应用的合成操作。参考 mask-composite 。

Applies to

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

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 属性从元素中删除已应用的蒙版效果 −

<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 元素的蒙版层 −

<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; 属性如何创建彩色渐变蒙版以及影响图片亮度的亮度值 −

<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 值设置蒙版位置的蒙版图片 −

<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 设置蒙版的大小 −

<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 值的蒙版图片，表明蒙版图片应垂直重复 −

<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（包括边框和内边距） −

<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) 值的蒙版图片。

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