Couches de Masque de Dégradé CSS

Les dégradés CSS peuvent également être utilisés comme image de couche de masque.

Couche de Masque de Dégradé Linéaire

Ici, nous utilisons une couche de masque de dégradé linéaire pour notre image. Ce dégradé linéaire va du haut (noir) vers le bas (transparent) :

Exemple

Utilisez un dégradé linéaire comme couche de masque :

 .mask1 { 
 -webkit-mask-image: linear-gradient(black, transparent); 
 mask-image: linear-gradient(black, transparent); 
 } 

Essayez-le vous-même »

Ici, nous utilisons un dégradé linéaire avec un masquage de texte comme couche de masque pour notre image :

Cinque Terre est une région côtière de la Ligurie, au nord-ouest de l'Italie. Elle se situe à l'ouest de la province de La Spezia et comprend cinq villages : Monterosso al Mare, Vernazza, Corniglia, Manarola et Riomaggiore.

Exemple

Utilisez un dégradé linéaire avec un masquage de texte comme couche de masque :

 .mask1 { 
 max-width: 600px; 
 height: 400px; 
 background: url(img_5terre.jpg) no-repeat; 
 -webkit-mask-image: linear-gradient(black, transparent); 
 mask-image: linear-gradient(black, transparent); 
 } 

Essayez-le vous-même »

Couche de Masque de Dégradé Radial - Cercle

Ici, nous utilisons un dégradé radial (en forme de cercle) comme couche de masque pour notre image :

Exemple

Utilisez un dégradé radial comme couche de masque (un cercle) :

 .mask2 { 
 -webkit-mask-image: radial-gradient(circle, black 50%, rgba(0, 0, 0, 0.5) 50%); 
 mask-image: radial-gradient(circle, black 50%, rgba(0, 0, 0, 0.5) 50%); 
 } 

Essayez-le vous-même »

Couche de Masque de Dégradé Radial - Ellipse

Ici, nous utilisons un dégradé radial (en forme d'ellipse) comme couche de masque pour notre image :

Exemple

Utilisez un dégradé radial comme couche de masque (une ellipse) :

 .mask3 { 
 -webkit-mask-image: radial-gradient(ellipse, black 50%, rgba(0, 0, 0, 0.5) 50%); 
 mask-image: radial-gradient(ellipse, black 50%, rgba(0, 0, 0, 0.5) 50%); 
 } 

Essayez-le vous-même »

Couche de Masque de Dégradé Conique

Ici, nous utilisons un dégradé conique comme couche de masque pour notre image :

Exemple

Utilisez un dégradé conique comme couche de masque :

 .mask3 { 
 -webkit-mask-image: conic-gradient(black 0deg, transparent 360deg); 
 mask-image: conic-gradient(black 0deg, transparent 360deg); 
 } 

Essayez-le vous-même »

Toutes les Propriétés de Masquage CSS

Le tableau suivant répertorie toutes les propriétés de masquage CSS :

Propriété	Description
mask-clip	Spécifie quelle zone est affectée par une image de masque
mask-composite	Spécifie une opération de composition utilisée sur la couche de masque actuelle avec les couches de masque en dessous
mask-image	Spécifie une image à utiliser comme couche de masque pour un élément
mask-mode	Spécifie si l'image de la couche de masque est traitée comme un masque de luminance ou comme un masque alpha
mask-origin	Spécifie la position d'origine (la zone de position du masque) d'une image de couche de masque
mask-position	Définit la position de départ d'une image de couche de masque (par rapport à la zone de position du masque)
mask-repeat	Spécifie comment l'image de la couche de masque est répétée
mask-size	Spécifie la taille d'une image de couche de masque
mask-type	Spécifie si un élément SVG <mask> est traité comme un masque de luminance ou comme un masque alpha