语法
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;
取值为下列一个或多个关键字（用逗号分隔）。
值
在合成操作中，称当前遮罩层为源，其下方所有层为目标。
形式定义
形式语法
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;
}
规范
| 规范 |
|---|
| CSS Masking Module Level 1 # the-mask-composite |