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;
取值为下列一个或多个关键字（用逗号分隔）。
值
在合成操作中，称当前遮罩层为源，其下方所有层为目标。
形式定义
形式语法
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 |
浏览器兼容性
Loading…