CSS遮罩 - mask-type

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

mask-mode CSS 属性可以覆盖此属性，因为它具有相同的效果。唯一的区别是，它应用于使用遮罩的元素。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> 元素上。由于遮罩具有黑色和透明区域，因此 mask-type 设置为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 的用法，其值为luminance。

<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(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 类用于向遮罩区域添加浅绿色叠加层，以提高可见性。

打印页面