mask-composite
CSS
property represents a compositing operation used on the current mask layer with the mask layers below it.
/* Keyword values */ mask-composite: add; mask-composite: subtract; mask-composite: intersect; mask-composite: exclude; /* Global values */ mask-composite: inherit; mask-composite: initial; mask-composite: unset;
One or more of the keyword values listed below, separated by commas.
For the composition the current mask layer is referred to as source , while all layers below it are referred to as destination .
add
The source is placed over the destination.
subtract
The source is placed, where it falls outside of the destination.
intersect
The parts of source that overlap the destination, replace the destination.
exclude
The non-overlapping regions of source and destination are combined.
| 初始值 |
add
|
|---|---|
| 适用于 |
all elements; In SVG, it applies to container elements excluding the
defs
element and all graphics elements
|
| 继承 | no |
| 计算值 | 如指定 |
| 动画类型 | discrete |
<compositing-operator>#where
<compositing-operator> = add | subtract | intersect | exclude
#masked {
width: 100px;
height: 100px;
background-color: #8cffa0;
mask-image: url(https://mdn.mozillademos.org/files/12668/MDN.svg),
url(https://mdn.mozillademos.org/files/12676/star.svg);
mask-size: 100% 100%;
mask-composite: add; /* Can be changed in the live sample */
}
<div id="masked"> </div> <select id="compositeMode"> <option value="add">add</option> <option value="subtract">subtract</option> <option value="intersect">intersect</option> <option value="exclude">exclude</option> </select>
var clipBox = document.getElementById("compositeMode");
clipBox.addEventListener("change", function (evt) {
document.getElementById("masked").style.maskComposite = evt.target.value;
});
| 规范 | 状态 | 注释 |
|---|---|---|
|
CSS Masking Module Level 1
The definition of 'mask-composite' in that specification. |
候选推荐 | 初始定义 |
| Desktop | Mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
mask-composite
|
Chrome
不支持
No
注意事项
|
Edge 不支持 18 — 79 | Firefox 完整支持 53 | IE 不支持 No |
Opera
不支持
No
注意事项
|
Safari
不支持
No
注意事项
|
WebView Android
不支持
No
注意事项
|
Chrome Android
不支持
No
注意事项
|
Firefox Android 完整支持 53 |
Opera Android
不支持
No
注意事项
|
Safari iOS
不支持
No
注意事项
|
Samsung Internet Android
不支持
No
注意事项
|
完整支持
不支持
见实现注意事项。