mask-mode

語法

/* Keyword values */
mask-mode: alpha;
mask-mode: luminance;
mask-mode: match-source;

/* Multiple values */
mask-mode: alpha, match-source;

/* Global values */
mask-mode: inherit;
mask-mode: initial;
mask-mode: revert;
mask-mode: revert-layer;
mask-mode: unset;

值

mask-mode 屬性可以採用多個逗號分隔的 <masking-mode> 關鍵字值，包括：

alpha

指示應使用遮罩影像的 Alpha（透明度）值。

luminance

指示應使用遮罩影像的亮度（明度）值。

match-source

指示遮罩的型別由源決定。這是預設屬性值。

• 如果 mask-image 引用 SVG <mask>，則使用其 mask-type 屬性值，或者，如果存在，則使用其 mask-type 屬性。如果兩者都沒有明確設定，則此值預設為 luminance。
• 如果遮罩影像源是 <image> 或 <gradient>，則使用遮罩影像的 alpha 值。

描述

遮罩將其透明度，以及根據遮罩型別，其亮度，傳遞給被遮罩的元素。如果遮罩是 <image> 型別，預設情況下，遮罩影像的 Alpha 值決定被遮罩元素每個部分的可見性：遮罩不透明的地方，被遮罩元素的相應部分可見；遮罩半透明的地方，元素也半透明，這些區域的元素被隱藏。當 mask-mode 屬性設定為或預設為 match-source 時，這是 <image> 遮罩的預設行為，並且當 mask-mode 明確設定為 alpha 時始終如此。

瞭解亮度

對於 luminance 遮罩，被遮罩元素的可見性取決於遮罩的不透明度和不透明區域顏色的亮度。白色（100% 亮度）不透明區域（alpha = 1）將被遮罩並可見，黑色區域（0% 亮度）透明（alpha = 0）將被裁剪。介於白色和黑色之間且具有部分不透明度的顏色區域將部分被遮罩，反映構成遮罩的每種顏色的亮度和 Alpha 透明度。

luminance 遮罩的不透明度由 rgb() 顏色的 R、G、B 和 A 值使用以下公式確定：

((0.2125 * R) + (0.7154 * G) + (0.0721 * B)) * A

例如，顏色 green 是 #008000 或 rgb(0% 50% 0% / 1)。在 luminance 遮罩中，任何被純 green 遮罩遮罩的區域將是 35.77% 不透明。如果此遮罩的 mask-mode 設定為 alpha，由於 green 是完全不透明的顏色，因此被遮罩區域將是 100% 不透明。

多個值

每個 mask-mode 值是一個逗號分隔的值列表。當存在多個值時，每個值對應於 mask-image 屬性中相同位置的遮罩層。這些值定義了關聯的遮罩影像是被視為 luminance 遮罩還是 alpha 遮罩。

瞭解 match-source

對於 match-source，使用 luminance 還是 alpha 取決於遮罩源的遮罩模式。如果 mask-image 屬性值是對 SVG <mask> 元素的引用，則使用 <mask> 元素的 mask-type 屬性值。如果 <mask> 元素上沒有設定 CSS mask-type 屬性，則使用 <mask> 元素的 mask-type 屬性值（如果存在且受支援）。如果兩者都沒有明確設定，則此值預設為 luminance；但僅限於 <mask> 元素作為遮罩源的情況。否則，如前所述，如果遮罩影像源是 <image> 而不是 SVG <mask>，則使用遮罩層影像的 alpha 值。

正式定義

正式語法

mask-mode = 
  <masking-mode>#  

<masking-mode> = 
  alpha         |
  luminance     |
  match-source  

示例

用法和值

此示例演示了 mask-mode 屬性的基本用法和不同值。

HTML

我們包含三個 <div> 元素，以便我們可以演示三個列舉的 mask-mode 關鍵字值。

<div class="alpha">ALPHA</div>
<div class="luminance">LUMINANCE</div>
<div class="matchSource">MATCH-SOURCE</div>

CSS

每個 <div> 都提供相同的背景和遮罩影像。每個 <div> 之間唯一的區別是 mask-mode 屬性的值。

div {
  background: blue linear-gradient(red, blue);
  mask-image: url("https://mdn.github.io/shared-assets/images/examples/mdn.svg");
}

.alpha {
  mask-mode: alpha;
}

.luminance {
  mask-mode: luminance;
}

.matchSource {
  mask-mode: match-source;
}

div {
  width: 227px;
  height: 200px;
  float: left;
  text-align: center;
  line-height: 65px;
  color: white;
  text-shadow: 1px 1px 2px black;
  font-family: sans-serif;
}

結果

由於遮罩源是 <image> 而不是 SVG <mask>，因此 match-source 值解析為 alpha。

規範

瀏覽器相容性

另見

• mask-type
• mask-image
• mask 簡寫
• CSS 遮罩簡介
• CSS mask 屬性
• 宣告多個蒙版
• CSS 遮罩模組