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
2023
Newly 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é 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
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
Chargement...