mask-composite

基线 2023

新可用

自 2023 年 12 月起，此功能在最新的设备和浏览器版本中都能正常工作。此功能可能在较旧的设备或浏览器中无法正常工作。

mask-composite CSS 属性表示在当前蒙版层与它下面的蒙版层上使用的合成操作。

语法

css
/* 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;

下面列出的一个或多个关键字值，用逗号分隔。

值

对于合成，当前蒙版层称为源，而它下面的所有层称为目标。

add

源放在目标之上。

subtract

源放在目标之外的地方。

intersect

源与目标重叠的部分替换目标。

exclude

源和目标的非重叠区域合并在一起。

正式定义

初始值add
适用于所有元素；在 SVG 中，它适用于容器元素，不包括 <defs> 元素和所有图形元素
继承否
计算值如指定
动画类型离散

正式语法

mask-composite = 
  <compositing-operator>#  

<compositing-operator> = 
  add        |
  subtract   |
  intersect  |
  exclude

示例

使用加法合成蒙版层

规范

规范
CSS 蒙版模块级别 1
# the-mask-composite

浏览器兼容性

BCD 表格仅在浏览器中加载

参见