Cette page a été traduite à partir de l'anglais par la communauté.Vous pouvez contribuer en rejoignant la communauté francophone sur MDN Web Docs.
mask-composite
Baseline 2023Newly available
Depuis December 2023, cette fonctionnalité fonctionne sur les appareils et les versions de navigateur les plus récents. Elle peut ne pas fonctionner sur les appareils ou navigateurs plus anciens.
La propriétéCSSmask-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éesource et les couches inférieures sont appeléesdestination.
addLa source est placée sur la destination.
subtractLa source est placée lorsque la destination est vide à cet endroit.
intersectLes endroits de la source qui chevauchent la destination prennent le pas sur la destination.
excludeLes 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
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 |