-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。
浏览器兼容性
加载中…