mask-type
mask-type CSS 屬性適用於 SVG <mask> 元素。它定義了是使用遮罩的亮度（明暗）內容還是alpha（透明度）內容。此屬性可能會被 mask-mode 屬性覆蓋。mask-type 屬性對影像或漸變遮罩沒有影響。
語法
/* Keyword values */
mask-type: luminance;
mask-type: alpha;
/* Global values */
mask-type: inherit;
mask-type: initial;
mask-type: revert;
mask-type: revert-layer;
mask-type: unset;
值
描述
mask-type 屬性僅與 SVG <mask> 元素相關。如果設定 mask-type: luminance，遮罩將使用遮罩每個部分的亮度；如果設定 mask-type: alpha，它將使用遮罩每個部分的透明度或不透明度。
預設行為
預設情況下，SVG <mask> 元素使用 mask-type: luminance。這意味著遮罩內容的顏色和透明度都會影響遮罩。遮罩是否不透明部分取決於不透明區域顏色的亮度。
- 完全不透明的白色區域（100% 亮度）將被遮罩並可見。
- 黑色（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)）的亮度值為 35.77%。任何被實心 green 亮度遮罩遮罩的區域將有 35.77% 可見。如果 mask-type 設定為 alpha，相同的完全不透明 green 顏色將使被遮罩區域 100% 可見。
如果 SVG <mask> 元素具有 fill="rgb(0 0 0 / 0.5)"，這是一個 50% 透明的黑色，那麼當 mask-type 設定為 alpha 時，被遮罩元素上的相應形狀將以 50% 不透明度顯示，因為 alpha 值為 0.5（50% 不透明度）。但如果 mask-type 預設為或設定為 luminance，被遮罩區域將完全裁剪且不可見，因為其亮度為 0。
mask-mode 對 mask-type 的影響
mask-type 屬性在 SVG <mask> 元素上設定，而 mask-mode 屬性在被遮罩的元素（你應用遮罩的元素）上設定。如果遮罩影像源不是 SVG <mask>，則此屬性無效。
mask-mode 的預設值為 match-source，這意味著瀏覽器使用 <mask> 元素的 mask-type 值來確定如何解釋它。如果 mask-mode 設定為 match-source 以外的值，則該值優先並覆蓋所應用遮罩的 mask-type 值。
如果 <mask> 被定義為遮罩影像的源，並且 mask-mode 被設定為或預設為 match-source，則 mask-mode 將解析為 <mask> 元素的 mask-type 值：luminance 或 alpha。如果未明確設定，則預設值為 luminance。
正式定義
正式語法
mask-type =
luminance |
alpha
示例
使用 mask-type 屬性
此示例演示如何使用 mask-type 屬性及其不同值的影響。
HTML
我們包含了兩個將被遮罩的影像。除了類名，這兩個影像是相同的。我們還包含了一個帶有兩個 <mask> 元素的 SVG。除了它們的 id 值，這兩個遮罩也是相同的：每個都有一個綠色和白色的心形，以及一個半透明的白黑填充圓形。
<img
class="alphaMaskType"
src="https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg"
alt="Pride flag" />
<img
class="luminanceMaskType"
src="https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg"
alt="Pride flag" />
<svg height="0" width="0">
<mask id="alphaMask">
<path
d="M20,70 A40,40,0,0,1,100,70 A40,40,0,0,1,180,70 Q180,130,100,190 Q20,130,20,70 Z"
fill="green"
stroke="white"
stroke-width="20" />
<circle
cx="170"
cy="170"
r="40"
fill="rgb(0 0 0 / 0.5)"
stroke="rgb(255 255 255 / 0.5)"
stroke-width="20" />
</mask>
<mask id="luminanceMask">
<path
d="M20,70 A40,40,0,0,1,100,70 A40,40,0,0,1,180,70 Q180,130,100,190 Q20,130,20,70 Z"
fill="green"
stroke="white"
stroke-width="20" />
<circle
cx="170"
cy="170"
r="40"
fill="rgb(0 0 0 / 0.5)"
stroke="rgb(255 255 255 / 0.5)"
stroke-width="20" />
</mask>
</svg>
CSS
我們將 mask-type 屬性應用於 <mask> 元素，然後將 <mask> 元素和遮罩源應用於影像。
mask#alphaMask {
mask-type: alpha;
}
mask#luminanceMask {
mask-type: luminance;
}
img.alphaMaskType {
mask-image: url("#alphaMask");
}
img.luminanceMaskType {
mask-image: url("#luminanceMask");
}
結果
由於 mask-mode 屬性的預設值為 match-source，第一個遮罩僅使用 alpha 通道來定義遮罩：白色和綠色完全不透明，50% 的白色和黑色顏色是 50% 不透明的，因為只考慮顏色的 alpha 值。第二個示例使用顏色的亮度來確定遮罩的不透明度，其中白色比綠色亮，半透明的白色比半透明的黑色亮。
規範
| 規範 |
|---|
| CSS 蒙版模組 Level 1 # 遮罩型別 |
瀏覽器相容性
載入中…