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 類用於向遮罩區域新增淺綠色疊加層，以提高可見性。

列印頁面