mask-mode
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-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-image
est 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
Exemples
Utiliser le mode de masque alpha
Spécifications
Specification |
---|
CSS Masking Module Level 1 # the-mask-mode |
Compatibilité des navigateurs
BCD tables only load in the browser