HTML & CSS

Masquage CSS – La propriété mask-image


Avec le masquage CSS, vous créez un calque de masque à placer sur un élément pour masquer partiellement ou entièrement des parties de l’élément.


La propriété CSS mask-image

Le CSS mask-image La propriété spécifie une image de calque de masque.

L’image du calque de masque peut être une image PNG, une image SVG, un dégradé CSS ou un élément SVG .


Prise en charge du navigateur

Note: La plupart des navigateurs ne prennent que partiellement en charge le masquage CSS. Vous devrez utiliser le préfixe -webkit- en plus de la propriété standard dans la plupart des navigateurs.

Les nombres dans le tableau ci-dessous indiquent la première version du navigateur qui prend entièrement en charge la propriété. Les nombres suivis de -webkit- spécifient la première version qui a fonctionné avec un préfixe.

Propriété
masque-image 4.0 -webkit- 79.0 -webkit- 53,0 4.0 -webkit- 15.0 -kit web-

Utiliser une image comme calque de masque

Pour utiliser une image PNG ou SVG comme calque de masque, utilisez une valeur url() pour transmettre l’image du calque de masque.

L’image du masque doit avoir une zone transparente ou semi-transparente. Le noir indique entièrement transparent.

Voici l’image du masque (une image PNG) que nous utiliserons :

Voici une image des Cinque Terre, en Italie :

Cinque Terre

Maintenant, nous appliquons l’image de masque (l’image PNG ci-dessus) comme calque de masque pour l’image des Cinque Terre, Italie :

Cinque Terre

Exemple

Voici le code source :

.mask1 {
-image-masque-webkit : url(w3logo.png) ;
masque-image : url(w3logo.png);

-webkit-mask-repeat : pas de répétition ;
masque-répétition : non-répétition ;
}

Essayez-le vous-même »

Exemple expliqué

Le mask-image La propriété spécifie l’image à utiliser comme calque de masque pour un élément.

Le mask-repeat La propriété spécifie si ou comment une image de masque sera répétée. Le no-repeat
indique que l’image du masque ne sera pas répétée (l’image du masque ne sera affichée qu’une seule fois).

Un autre exemple

Si nous omettons le mask-repeat propriété, l’image du masque sera répétée sur toute l’image des Cinque Terre, Italie :

Cinque Terre

Exemple

Voici le code source :

.mask1 {
-image-masque-webkit : url(w3logo.png) ;
masque-image : url(w3logo.png);
}

Essayez-le vous-même »



Utiliser les dégradés comme calque de masque

Les dégradés linéaires et radiaux CSS peuvent également être utilisés comme images de masque.

Exemples de dégradés linéaires

Ici, nous utilisons un dégradé linéaire comme calque de masque pour notre image. Ce dégradé linéaire va du haut (noir) au bas (transparent) :

Cinque Terre

Exemple

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

.mask1 {
-webkit-mask-image : gradient linéaire (noir, transparent) ;
mask-image : linear-gradient (noir, transparent) ;
}

Essayez-le vous-même »

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

Les Cinque Terre sont une zone côtière de la Ligurie, au nord-ouest de l’Italie. Il se trouve à l’ouest de la province de La Spezia et comprend cinq villages : Monterosso al Mare, Vernazza, Corniglia, Manarola et Riomaggiore.

Les Cinque Terre sont une zone côtière de la Ligurie, au nord-ouest de l’Italie. Il se trouve à l’ouest de la province de La Spezia et comprend cinq villages : Monterosso al Mare, Vernazza, Corniglia, Manarola et Riomaggiore.

Les Cinque Terre sont une zone côtière de la Ligurie, au nord-ouest de l’Italie. Il se trouve à 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 calque de masque :

.mask1 {
largeur maximale : 600px ;
hauteur : 350 pixels ;

débordement-y : défilement ;
fond : url(img_5terre.jpg) non-repeat ;

-webkit-mask-image : gradient linéaire (noir, transparent) ;

masque-image : dégradé linéaire (noir, transparent) ;
}

Essayez-le vous-même »

Exemples de dégradés radiaux

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

Cinque Terre

Exemple

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

.mask2 {
-webkit-mask-image : dégradé radial (cercle, noir 50 %, rgba (0, 0, 0, 0,5) 50 % );

mask-image : radial-gradient (cercle, noir 50 %, rgba (0, 0, 0, 0,5) 50 % );
}

Essayez-le vous-même »

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

Cinque Terre

Exemple

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

.mask3 {
-webkit-mask-image : dégradé radial (ellipse, noir 50 %, rgba (0, 0, 0, 0,5) 50 %);
masque-image : dégradé radial (ellipse, noir 50 %, rgba (0, 0, 0, 0,5) 50 %) );
}

Essayez-le vous-même »


Utiliser SVG comme calque de masque

Le SVG <mask> L’élément peut être utilisé dans un graphique SVG pour créer des effets de masquage.

Ici, nous utilisons le SVG <mask> élément pour créer différentes couches de masque pour notre image :

Désolé, votre navigateur ne prend pas en charge le SVG en ligne.

Exemple

Une couche de masque SVG (formée en triangle) :




Essayez-le vous-même »

Désolé, votre navigateur ne prend pas en charge le SVG en ligne.

Exemple

Une couche de masque SVG (formée en étoile) :




Essayez-le vous-même »

Désolé, votre navigateur ne prend pas en charge le SVG en ligne.

Exemple

Une couche de masque SVG (formée en cercles) :








Essayez-le vous-même »


Propriétés de masquage CSS

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

Propriété Description
masque-image Spécifie une image à utiliser comme calque de masque pour un élément
mode masque Spécifie si l’image du calque de masque est traitée comme un masque de luminance ou comme un masque alpha
masque-origine Spécifie la position d’origine (la zone de position du masque) d’une image de calque de masque
position du masque Définit la position de départ d’une image de calque de masque (par rapport à la zone de position du masque)
masque-répétition Spécifie comment l’image du calque de masque est répétée
taille du masque Spécifie la taille d’une image de calque de masque

#Masquage #CSS #propriété #maskimage

Articles similaires

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Voir Aussi
Fermer
Bouton retour en haut de la page