Masque-mode - Astuces CSS | CSS Almanach 2025

La mask-modepropriété CSS indique si l'image du calque de masque CSS est traitée comme un masque alpha ou un masque de luminance.

.element ( mask-image: url(sun.svg); mask-mode: alpha; )

Syntaxe

mask-mode: alpha | luminance | match-source

La propriété accepte une valeur mot - clé ou une liste séparée par des virgules de deux ou trois des alpha, luminanceet des mask-sourcevaleurs.

Valeur initiale: match-source
S'applique à: tous les éléments. En SVG, il s'applique aux éléments conteneurs à l'exclusion de l'élément, tous les éléments graphiques.
Héritée: non
Valeur calculée: comme spécifié
Type d'animation: discret

Valeurs

/* Keyword values */ mask-mode: alpha; mask-mode: luminance; mask-mode: match-source; /* Global values */ mask-mode: inherit; mask-mode: initial; mask-mode: unset;

alpha: spécifie que les valeurs alpha (canal alpha) de l'image du calque de masque doivent être utilisées comme valeurs de masque.
luminance: spécifie que les valeurs de luminance de l'image de masque doivent être utilisées comme valeurs de masque.
match-source: la valeur par défaut, qui définit le mode de masque sur alpha si la référence de masque de la mask-imagepropriété est un élément CSS comme une URL d'image ou un dégradé. Cependant, si la référence de masque de la mask-imagepropriété est un élément SVG , la valeur spécifiée par la propriété mask-type de l'élément référencé doit être utilisée.
initial: applique le paramètre par défaut de la propriété, qui est match-source.
inherit: adopte la valeur du mode masque du parent.
unset: supprime le mode masque actuel de l'élément.

Utiliser plusieurs valeurs

Cette propriété peut prendre une liste de valeurs séparées par des virgules pour les modes de masque et chaque valeur est appliquée à une image de calque de masque correspondante spécifiée dans la propriété mask-image.

Dans l'exemple suivant, la première valeur spécifie le mode de masque correspondant à la première image, la seconde valeur pour la seconde image, etc.

.element ( mask-image: url(image1.png.webp), url(image2.png.webp), url(image3.png.webp); mask-mode: luminance, alpha, match-source; )

Masques alpha et luminance

Le masquage en CSS est livré avec deux méthodes qui présentent des différences dans le calcul des valeurs de masque.

Masques alpha

Les images sont faites de pixels, chaque pixel a des données contenant des valeurs de couleur et peut-être des valeurs alpha avec des informations de transparence. Une image avec un canal alpha peut être un masque alpha , comme les images PNG avec des zones noires et transparentes.

Dans une simple opération de masquage, nous avons un élément et une image de masque placés dessus. La valeur alpha de chaque pixel de l'image de masque sera fusionnée avec son pixel correspondant dans l'élément.

Si la valeur alpha est nulle (c'est-à-dire transparente), elle l'emporte et cette partie de l'élément est masquée (c'est-à-dire cachée).
Une valeur alpha de un (c'est-à-dire totalement opaque) permet à ce pixel de l'élément d'être visible.
Une valeur comprise entre 0 et 1 (par exemple 0,5) permet au pixel d'être visible mais avec un certain niveau de transparence.

Ainsi, dans cette méthode, la valeur de masque à un point donné est simplement la valeur du canal alpha à ce point de l'image de masque et les canaux de couleur ne contribuent pas à la valeur de masque.

L'exemple ci-dessous est un masque alpha qui contient uniquement des zones noires (valeur alpha de 1) et transparentes (valeur alpha de 0) et vous pouvez voir le résultat dont certaines parties sont entièrement visibles et d'autres entièrement transparentes:

Utilisation d'un PNG avec un canal alpha comme image de masque

Mais dans l'exemple suivant, nous utilisons un dégradé qui a un niveau de transparence différent. Le résultat n'est pas seulement visible ou transparent, mais il y a des zones translucides:

img ( mask-image: linear-gradient(black, transparent); mask-mode: alpha; )

Et voici à quoi ressemble le résultat dans le navigateur:

Utilisation d'un dégradé linéaire comme image de masque

Masques de luminance

Dans un masque de luminance, les couleurs et les valeurs alpha comptent. Lorsque la valeur alpha est 0 (c'est-à-dire totalement transparent), l'élément est masqué; lorsque la valeur alpha est 1, les valeurs de masque varient en fonction du canal de couleur de ce pixel. Par exemple, lorsque la couleur est blanche, l'élément est visible; dans le cas d'une zone noire, l'élément est masqué.

Alors que le calcul des valeurs de masque dans un masque alpha est basé uniquement sur les valeurs alpha de l'image de masque, les valeurs de masque d'un masque de luminance sont calculées à partir de la luminance et des valeurs alpha. Les navigateurs font cela dans les étapes suivantes:

Calculez une valeur de luminance à partir des valeurs de canal de couleur.
Multipliez la valeur de luminance calculée par la valeur alpha correspondante pour produire la valeur de masque.

/ explication Pour plus d'informations sur ces calculs, vous pouvez consulter la section de traitement des masques dans la spécification du module de masquage CSS 1 du projet de l'éditeur de septembre 2019.

Ci-dessous est une image de masque avec un soleil blanc au centre et des zones transparentes autour. Comme vous pouvez le voir, les zones while sont entièrement visibles:

Utilisation d'une image PNG avec un canal alpha et des zones blanches comme image de masque

Et dans l'exemple suivant, un dégradé coloré est utilisé comme image de masque et vous pouvez voir l'effet de différentes couleurs sur les valeurs de masque en mode de luminance: