mask-mode
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-mode détermine si le masque défini par mask-image est considéré comme un masque de luminance ou un masque alpha (transparence).
/* Valeurs avec un mot-clé */
mask-mode: alpha;
mask-mode: luminance;
mask-mode: match-source;
/* Gestion de plusieurs masques */
mask-mode: alpha, match-source;
/* Valeurs globales */
mask-mode: inherit;
mask-mode: initial;
mask-mode: revert;
mask-mode: unset;
Syntaxe
La propriété mask-mode est définie avec un ou plusieurs mots-clés parmi ceux de la liste suivante, séparés par des virgules.
Valeurs
alpha-
Ce mot-clé indique que ce sont les valeurs du canal alpha (le canal d'opacité) qui sont utilisées comme valeurs de masque.
luminance-
Ce mot-clé indique que ce sont les valeurs de luminance qui sont utilisées comme valeurs de masque.
match-source-
Si la propriété
mask-imageest de type<mask-source>, les valeurs de luminance de l'image doivent être utilisées comme valeurs pour le masque.Si elle est de type
<image>, ce seront les valeurs de transparence (canal alpha) qui seront utilisées.
Définition formelle
| Valeur initiale | match-source |
|---|---|
| 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-mode =
<masking-mode>#
<masking-mode> =
alpha |
luminance |
match-source
Exemples
Utiliser le mode de masque alpha
Spécifications
| Specification |
|---|
| CSS Masking Module Level 1 # the-mask-mode |