This is an experimental technology
Check the Browser compatibility table carefully before using this in production.
The 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;
Initial value | add |
---|---|
Applies to | all elements; In SVG, it applies to container elements excluding the <defs> element and all graphics elements |
Inherited | no |
Media | visual |
Computed value | as specified |
Animation type | discrete |
Canonical order | per grammar |
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
subtract
intersect
exclude
<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 */ }
Specification | Status | Comment |
---|---|---|
CSS Masking Module Level 1 The definition of 'mask-composite' in that specification. | Candidate Recommendation | Initial definition |
Desktop | ||||||
---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | |
Basic support | No
|
18 | 53 | No | No
|
No
|
Mobile | |||||||
---|---|---|---|---|---|---|---|
Android webview | Chrome for Android | Edge Mobile | Firefox for Android | Opera for Android | iOS Safari | Samsung Internet | |
Basic support | ? | ? | ? | 53 | ? | ? | No |
© 2005–2018 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/mask-composite