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

BCD tables only load in the browser

Voir aussi