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

列印頁面