mask-composite

Baseline 2023
Newly available

Since December 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

We’d love to hear your thoughts on the next set of proposals for the JavaScript language. You can find a description of the proposals here.
Please take two minutes to fill out our short survey.

CSS 属性 mask-composite 表示对当前遮罩层及其下方遮罩层执行的合成操作。

语法

css
/* 关键字值 */
mask-composite: add;
mask-composite: subtract;
mask-composite: intersect;
mask-composite: exclude;

/* 全局值 */
mask-composite: inherit;
mask-composite: initial;
mask-composite: revert;
mask-composite: revert-layer;
mask-composite: unset;

取值为下列一个或多个关键字（用逗号分隔）。

值

在合成操作中，称当前遮罩层为源，其下方所有层为目标。

add

将源叠加在目标上方。

subtract

仅保留源图层中位于目标区域之外的部分。

intersect

仅保留源与目标重叠的区域，并替换目标中的相应区域。

exclude

将源和目标中不重叠的区域合并显示。

形式定义

初始值add
适用元素all elements; In SVG, it applies to container elements excluding the <defs> element and all graphics elements
是否是继承属性否
计算值as specified
动画类型离散值

形式语法

mask-composite = 
  <compositing-operator>#  

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

示例

使用叠加模式合成遮罩层

html
<div class="masked"></div>
css
.masked {
  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;
}

规范

Specification
CSS Masking Module Level 1
# the-mask-composite

浏览器兼容性

参见