CSS - mask-mode 属性

CSS mask-mode 属性指定由 mask-image 给出的遮罩参考是否应被视为亮度或 Alpha 遮罩。

语法

mask-mode: match-source | alpha | luminance | initial | inherit;

属性值

值	描述
match-source	如果 mask-image 属性是图像，则使用alpha值，如果 mask-image 是 SVG <mask> 元素，则使用 <mask> 元素的 mask type 属性。默认值。
alpha	遮罩层图像的透明度值（Alpha 通道）用作遮罩值。
luminance	遮罩层图像的亮度值用作遮罩值。
initial	它将属性设置为其默认值。
inherit	它从父元素继承属性。

CSS Mask Mode 属性示例

以下示例使用不同的值解释了mask-mode属性。

使用 Alpha 值的 Mask Mode 属性

要根据遮罩图像的 Alpha（不透明度）值应用遮罩，我们使用alpha值。遮罩的透明度决定了被遮罩元素的可见性，其中不透明度更高的区域显示元素，而透明度更高的区域隐藏元素。这在以下示例中显示。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .mask-container {
         mask-image: url(/css/images/logo.png);
         mask-size: 70%; 
         mask-position: 25%;
         mask-repeat: no-repeat;
         mask-mode: alpha;
      }
   </style>
</head>

<body>
   <h2>
      CSS mask-mode property
   </h2>
   <h4>
      mask-mode: alpha
   </h4>
   <div class="mask-container">
      <img src="/css/images/scenery.jpg" 
      alt="img" width=470 height=130>
   </div>
   <h4>
      image used:
   </h4>
   <div>
      <img src="/css/images/scenery.jpg" 
      alt="img" width=200 height=150>
   </div>
   </div>

</body>

</html>

使用亮度值的 Mask Mode 属性

要根据遮罩图像的亮度（亮度）应用遮罩，我们使用luminance值。遮罩的亮度决定了元素的可见性，其中较亮的区域显示元素，而较暗的区域遮挡元素。这在以下示例中显示。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .mask-container {
         mask-image: url(/css/images/logo.png);
         mask-size: 70%; 
         mask-position: 25%;
         mask-repeat: no-repeat;
         mask-mode: luminance;
      }
   </style>
</head>

<body>
   <h2>
      CSS mask-mode property
   </h2>
   <h4>
      mask-mode: luminance
   </h4>
   <div class="mask-container">
      <img src="/css/images/scenery.jpg" 
      alt="img" width=470 height=130>
   </div>
   <h4>
      image used:
   </h4>
   <div>
      <img src="/css/images/scenery.jpg" 
      alt="img" width=200 height=150>
   </div>
   </div>

</body>

</html>

支持的浏览器

属性
mask-mode	120	120	53	15.4	106

css_properties_reference.htm

打印页面