CSS 属性

CSS 属性 mask-type 将 SVG <mask> 元素设置为亮度或 alpha 蒙版。它适用于 <mask> 元素本身。

mask-mode CSS 属性可以覆盖此属性，因为它具有相同的效果。唯一的区别是，它应用于使用 mask 的元素。 Alpha 蒙版的渲染通常更快。

属性值

CSS 属性 mask-type 指定为以下值之一:

  • luminance:它是一个关键字，表示关联的掩模图像是亮度掩模。

  • alpha:它是一个关键字，表示关联的掩模图像是亮度掩模。相关图像是一个 alpha 蒙版。遮罩层图像的透明度（Alpha 通道）值用作遮罩值。 Alpha 值或 Alpha 通道指定 <color> 的不透明度。

应用于

应用于所有 <mask> 元素。

语法

mask-type = luminance | alpha;

CSS mask-type: alpha 值

以下示例演示了 CSS 属性 mask-type 的使用，其中使用具有黑色和透明区域的遮罩元素。使用元素的 id (#mask)，它将掩码放置在 <div> 元素上。由于遮罩有黑色和透明区域，因此遮罩类型设置为 alpha。

<html>
<head>
<style>
    div {
      width: 150px;
      height: 150px;
      background-color: purple;
      mask-image: url(#mask);
   }    

   mask {
      mask-type: alpha; 
   }
</style>
</head>
<body>
   <div></div>
   <svg>
      <mask id="mask">
         <path fill="black" d="M10,35 A20,20,0,0,1,50,35 A20,20,0,0,1,90,35 Q90,65,50,95 Q10,65,10,35 Z" />
      </mask>    
   </svg></body>
</html>

CSS mask-type: 亮度值

以下示例演示 CSS 属性的使用mask-type，值为亮度。

<html>
<head>
<style>
   body {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100%;
      margin: 0;
      background-color: darkgrey;
      overflow: hidden;
   }

   .container {
      display: grid;
      position: relative;
      padding: 20px;
      border: 2px solid black;
   }

   .box {
      margin: 20px;
      display: block;
      width: 200px;
      height: 150px;
      background-image: url(/css/images/border.png);
      mask-type: luminance;
   }

   .overlay {
      position: absolute;
      width: 100%;
      height: 100%;
      background-color: rgb(0, 201, 0, 0.2);
   }
</style>
</head>
<body>
   <div class="container">
      <div class="box"></div>
      <div class="overlay"></div>
   </div>
</body>
</html>

在上面的示例中:

  • .box 类表示具有背景图像的元素将被屏蔽。

  • .overlay 类用于向屏蔽区域添加浅绿色覆盖层，以获得更好的可见性。