-webkit-mask-composite

非标准：此功能是非标准的，不在标准轨道上。请勿在面向 Web 的生产网站上使用它：它不会对每个用户起作用。实现之间也可能存在很大的不兼容性，并且行为在将来可能会发生变化。

-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: 源蒙版图像和目标蒙版图像中的重叠像素如果都完全不透明，则将变得完全透明。

正式定义

初始值	`source-over`
应用于	所有元素
继承	否
计算值	如指定
动画类型	离散

正式语法

-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。

浏览器兼容性

BCD 表只在浏览器中加载

另请参阅

mask-composite