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.

La propriété CSS mask-composite permet d'effectuer une opération de composition entre le masque situé sur la couche de l'élément et le masque présent en dessous.

css
/* Valeurs avec un mot-clé*/
mask-composite: add;
mask-composite: subtract;
mask-composite: intersect;
mask-composite: exclude;

/* Valeurs globales */
mask-composite: inherit;
mask-composite: initial;
mask-composite: revert;
mask-composite: unset;

Syntaxe

Un ou plusieurs mots-clés parmi ceux listés ci-après, chacun séparé par une virgule.

Valeurs

La couche du masque de l'élément est appelée source et les couches inférieures sont appelées destination.

add

La source est placée sur la destination.

subtract

La source est placée lorsque la destination est vide à cet endroit.

intersect

Les endroits de la source qui chevauchent la destination prennent le pas sur la destination.

exclude

Les régions de la source et de la destination qui ne se chevauchent pas sont combinées.

Définition formelle

Valeur initialeadd
Applicabilitétous les éléments ; en SVG, cela s'applique aux éléments conteneurs à l'exception des éléments <defs> et des éléments graphiques
Héritéenon
Valeur calculéecomme spécifié
Type d'animationdiscrète

Syntaxe formelle

mask-composite = 
<compositing-operator>#

<compositing-operator> =
add |
subtract |
intersect |
exclude

Exemples

Composer des couches de masques de façon additive

Spécifications

Specification
CSS Masking Module Level 1
# the-mask-composite

Compatibilité des navigateurs

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
mask-composite
add
exclude
intersect
subtract

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
See implementation notes.
Requires a vendor prefix or different name for use.
Has more compatibility info.

Voir aussi