-webkit-mask-composite
非標準：此特性未標準化。我們不建議在生產環境中使用非標準特性，因為它們瀏覽器支援有限，並且可能會更改或被移除。但是，在沒有標準選項的特定情況下，它們可以是合適的替代方案。
-webkit-mask-composite 屬性指定了應用於同一元素的多個遮罩影像相互合成的方式。遮罩影像的合成順序與它們在 -webkit-mask-image 屬性中宣告的順序相反。
注意： 有一個標準化的 mask-composite 屬性，使用不同的關鍵字覆蓋了該非標準屬性的一部分功能。
語法
css
/* Keyword values */
-webkit-mask-composite: clear;
-webkit-mask-composite: copy;
-webkit-mask-composite: source-over;
-webkit-mask-composite: source-in;
-webkit-mask-composite: source-out;
-webkit-mask-composite: source-atop;
-webkit-mask-composite: destination-over;
-webkit-mask-composite: destination-in;
-webkit-mask-composite: destination-out;
-webkit-mask-composite: destination-atop;
-webkit-mask-composite: xor;
/* Global values */
-webkit-mask-composite: inherit;
-webkit-mask-composite: initial;
-webkit-mask-composite: revert;
-webkit-mask-composite: revert-layer;
-webkit-mask-composite: unset;
值
clear-
源遮罩影像和目標遮罩影像中重疊的畫素被清除。
copy-
源遮罩影像替換目標遮罩影像。
source-over-
源遮罩影像呈現在目標遮罩影像之上。
source-in-
源遮罩影像和目標遮罩影像中重疊的畫素被源遮罩影像的畫素替換；所有其他畫素被清除。
source-out-
源遮罩影像和目標遮罩影像中重疊的畫素被清除；源遮罩影像的所有剩餘畫素被渲染。
source-atop-
目標遮罩影像的畫素被渲染。源遮罩影像的畫素僅在它們與目標遮罩影像的非透明部分重疊時才被渲染。這導致源遮罩影像沒有效果。
destination-over-
目標遮罩影像呈現在源遮罩影像之上。
destination-in-
源遮罩影像和目標遮罩影像中重疊的畫素保留為目標遮罩影像的畫素；所有其他畫素被清除。
destination-out-
源遮罩影像和目標遮罩影像中重疊的畫素被清除；源遮罩影像的所有剩餘畫素被渲染。
destination-atop-
源遮罩影像的畫素被渲染。目標遮罩影像的畫素僅在它們與目標遮罩影像的非透明部分重疊時才被渲染。這導致目標遮罩影像沒有效果。
xor-
源遮罩影像和目標遮罩影像中重疊的畫素，如果它們都是完全不透明的，則變為完全透明。
正式定義
正式語法
-webkit-mask-composite =
<composite-style>#
示例
使用 XOR 進行合成
css
.example {
-webkit-mask-image: url("mask1.png"), url("mask2.png");
-webkit-mask-composite: xor, source-over;
}
規範
不屬於任何標準。該屬性被指定為使用不同值的 mask-composite。
瀏覽器相容性
載入中…