mask-composite
Baseline 2023Newly 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.
/* 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 initiale | add |
|---|---|
| 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ée | non |
| Valeur calculée | comme spécifié |
| Type d'animation | discrète |
Syntaxe formelle
Exemples
Composer des couches de masques de façon additive
Spécifications
| Specification |
|---|
| CSS Masking Module Level 1 # the-mask-composite |