View in EnglishAlways switch to English

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.

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

浏览器兼容性

参见

CSS 中的裁剪和遮罩

Help improve MDN

Learn how to contribute

This page was last modified on2025年11月3日 byMDN contributors.

View this page on GitHub •Report a problem with this content

Movatterモバイル変換

mask-composite

Help improve MDN