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).

css
/* 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 initialematch-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éenon
Valeur calculéecomme spécifié
Type d'animationdiscrè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

Compatibilité des navigateurs

BCD tables only load in the browser

Voir aussi