語法
/* Keyword values */
mask-composite: add;
mask-composite: subtract;
mask-composite: intersect;
mask-composite: exclude;
/* Global values */
mask-composite: inherit;
mask-composite: initial;
mask-composite: revert;
mask-composite: revert-layer;
mask-composite: unset;
值
該屬性接受一個逗號分隔的 <compositing-operator> 關鍵字值列表，每個值代表一個 Porter-Duff 合成運算子，它定義了當前遮罩層與其下方遮罩層之間使用的合成操作，包括：
add (新增)-
關聯的遮罩影像放置在所有下方的遮罩層之上（應用相應的合成運算子）。這是預設值。
subtract (減去)-
關聯的遮罩影像放置在其超出所有下方的遮罩層（應用相應的合成運算子）的區域。
intersect (交集)-
關聯遮罩影像與所有下方合成遮罩層重疊的部分替換了之前合成的層。
exclude (排除)-
關聯遮罩影像和下方遮罩層的非重疊區域，在應用了相應的合成運算子後，進行組合。
描述
當一個元素應用了多個遮罩層時，mask-composite 屬性可以用於定義多個遮罩如何相互作用，或者如何組合，以建立最終的遮罩效果。
層的數量由 mask-image 屬性值中逗號分隔值的數量決定（即使某個值為 none）。逗號分隔值列表中的每個 mask-composite 值按順序與一個 mask-image 值匹配。如果 mask-composite 中的值數量等於或大於 mask-image 值的數量，則多餘的值將被忽略。如果 mask-composite 屬性沒有足夠的逗號分隔值來匹配層的數量，則該值列表將重複直到數量足夠。
在處理過程中，源層（即當前或關聯的遮罩層影像）被新增到（預設）、從目標層中減去、與目標層相交，或從目標層中排除。目標層是源層下方的遮罩層，並應用了相應的合成運算子；這包括所有以前的層，按逗號分隔遮罩列表中的出現順序合成。當前遮罩層下方的所有遮罩層都必須在應用當前遮罩層的合成操作之前進行合成。遮罩層影像在透過定義的合成值組合之前，會被轉換為 alpha 遮罩進行處理。
應用於任何元素或偽元素的多個遮罩層，其行為就像它們被渲染到一個隔離組中一樣。換句話說，遮罩層與其它遮罩層合成，而不是與元素的內容或元素後面的內容合成。
正式定義
正式語法
mask-composite =
<compositing-operator>#
<compositing-operator> =
add |
subtract |
intersect |
exclude
示例
基本用法
此示例演示了 mask-composite 屬性的基本用法。
HTML
我們包含一個 HTML <div> 元素，然後我們將對其進行樣式設定。
<div></div>
CSS
我們為 <div> 提供大小和顏色，然後新增兩個 mask-image，並使用 mask-size 屬性使其大小與它們所遮罩的元素匹配。最後，我們將 mask-composite 屬性設定為 subtract，從而從第一個遮罩影像中減去第二個遮罩影像。
div {
width: 100px;
height: 100px;
background-color: red;
mask-image:
url("https://mdn.github.io/shared-assets/images/examples/mdn.svg"),
url("https://mdn.github.io/shared-assets/images/examples/mask-star.svg");
mask-size: 100% 100%;
mask-composite: subtract;
}
結果
值比較
此示例演示了 mask-composite 屬性的四個 <compositing-operator> 關鍵字值，並比較了 alpha 和 luminance 遮罩模式的效果。
HTML
我們有一個包含八張圖片的 <table>。為簡潔起見，<table> 已隱藏。
<img
src="https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg"
alt="Pride flag" />
還有一個包含 4 個遮罩的 SVG；一個 alpha 心形和圓形，以及一個亮度心形和圓形。心形遮罩使用純色定義。圓形遮罩使用半透明的白色和黑色 stroke 和 fill 顏色建立。
<svg height="0" width="0">
<mask id="heartAlpha" class="alpha">
<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" />
</mask>
<mask id="circleAlpha" class="alpha">
<circle
cx="130"
cy="130"
r="50"
fill="rgb(0 0 0 / 0.5)"
stroke="rgb(255 255 255 / 0.5)"
stroke-width="20" />
</mask>
<mask id="heartLuminance" class="luminance">
<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" />
</mask>
<mask id="circleLuminance" class="luminance">
<circle
cx="130"
cy="130"
r="50"
fill="rgb(0 0 0 / 0.5)"
stroke="rgb(255 255 255 / 0.5)"
stroke-width="20" />
</mask>
</svg>
CSS
首先，我們為 <mask> 元素設定樣式，為每個遮罩提供 alpha 或 luminance 的 mask-type 屬性值。
mask.luminance {
mask-type: luminance;
}
mask.alpha {
mask-type: alpha;
}
然後，我們將心形和圓形遮罩作為逗號分隔的 mask-image 屬性值應用。這些應用於每個 <img> 元素，同一行中的所有影像都獲得相同的遮罩。
/* apply the mask images */
tr.alphaMaskType img {
mask-image: url("#heartAlpha"), url("#circleAlpha");
}
tr.luminanceMaskType img {
mask-image: url("#heartLuminance"), url("#circleLuminance");
}
最後，我們使用 mask-composite 屬性組合遮罩，按表列應用四個不同的列舉 mask-composite 值。
/* property we're testing */
td:nth-of-type(1) img {
mask-composite: add;
}
td:nth-of-type(2) img {
mask-composite: subtract;
}
td:nth-of-type(3) img {
mask-composite: intersect;
}
td:nth-of-type(4) img {
mask-composite: exclude;
}
為簡潔起見，表格樣式已隱藏。
結果
規範
| 規範 |
|---|
| CSS 蒙版模組 Level 1 # the-mask-composite |
瀏覽器相容性
載入中…