CSS - mask 属性

CSS 的mask 属性用于在特定位置遮罩并显示图像，以部分或完全隐藏元素。此属性是以下 CSS 属性的简写：mask-clip、mask-composite、mask-image、mask-mode、mask-origin、mask-position、mask-repeat 和 mask-size

语法

mask: <mask-image> <mask-mode> <mask-composite> <mask-clip> <mask-origin> <mask-position> <mask-repeat> <mask-size> | initial | inherit;

属性值

值	描述
mask-image	指定元素遮罩层的图像。默认值为 none。
mask-mode	指定遮罩层图像应为亮度遮罩还是 Alpha 遮罩。默认值为 match-source。
mask-composite	指定用于当前遮罩层与下方遮罩层的合成操作。默认值为 add。
mask-clip	指定受遮罩图像影响的区域。默认值为 border-box。
mask-origin	指定遮罩层图像的原点位置。默认值为 border-box。
mask-position	设置遮罩图像相对于遮罩位置区域的起始位置。默认值为 0% 0%。
mask-repeat	指定遮罩图像的重复方式。默认值为 repeat。
mask-size	指定遮罩层图像的大小。默认值为 auto。
initial	将属性设置为其默认值。
inherit	从父元素继承属性。

CSS Mask 属性示例

以下示例说明了使用不同值的mask 属性。

使用 Mask 属性定义多个值

mask 属性是八个属性的简写属性。某些属性是可选的，可能不需要。在以下示例中，定义了五个属性的值，即：mask-image、mask-mode、mask-repeat、mask-position 和 mask-size。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .masked {
         height: 200px;
         mask: url('/css/images/logo.png') 
               no-repeat no-repeat 45% 50%;
      }
   </style>
</head>

<body>
   <h2>
      CSS mask property
   </h2>
   <h4>
      mask:
   </h4>
   <div class="masked">
      <img src="/css/images/scenery.jpg" 
      alt="flow" height=300 width=500>
   </div>
   <h4>
      image used:
   </h4>
      <img src="/css/images/scenery.jpg" 
      alt="flow" height=150 width=200>
</body>

</html>

Mask 属性的组成属性

mask 属性是八个属性的简写属性。这八个属性可以单独使用以产生与mask 属性产生的相同效果。以下示例中单独使用了某些属性，以显示与上述示例相同的效果。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .masked {
         height: 200px;
         mask-image: url('/css/images/logo.png');
         mask-mode: no-repeat;
         mask-repeat: no-repeat;
         mask-position: 45%;
         mask-size: 50%;
      }
   </style>
</head>

<body>
   <h2>
      CSS mask property
   </h2>
   <h4>
      mask-image: url("logo")
   </h4>
   <h4>
      mask-mode: no-repeat
   </h4>
   <h4>
      mask-repeat: no-repeat
   </h4>
   <h4>
      mask-position: 45%
   </h4>
   <h4>
      mask-size: 50%
   </h4>
   <div class="masked">
      <img src="/css/images/scenery.jpg" 
      alt="flow" height=300 width=500>
   </div>
   <h4>image used:</h4>
      <img src="/css/images/scenery.jpg" 
      alt="flow" height=150 width=200>
</body>

</html>

Mask 属性与渐变

mask 属性可以与渐变一起使用以产生视觉效果。在以下示例中，使用了linear-gradient 和 radial-gradient。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .masked1 {
         mask: linear-gradient(to right bottom, black, transparent);
      }

      .masked2 {
         mask: radial-gradient(circle, black 35%, rgba(0, 0, 0, 0.5) 60%);
      }
   </style>
</head>

<body>
   <h2>
      CSS mask property
   </h2>
   <h4>
      mask: linear-gradient 
      (to right bottom, black, transparent)
   </h4>
   <div class="masked1">
      <img src="/css/images/scenery.jpg" 
      alt="flow" height=200 width=400>
   </div>
   <h4>
      mask: radial-gradient
      (circle, black 35%, rgba(0, 0, 0, 0.5) 60%)
   </h4>
   <div class="masked2">
      <img src="/css/images/scenery.jpg" 
      alt="flow" height=200 width=400>
   </div>
   <h4>
      image used:
   </h4>
      <img src="/css/images/scenery.jpg" 
      alt="flow" height=150 width=200>
</body>

</html>

支持的浏览器

属性
mask	120	120	53	15.4	106

css_properties_reference.htm

打印页面