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 :
Maintenant, nous appliquons l’image de masque (l’image PNG ci-dessus) comme calque de masque pour l’image des Cinque Terre, Italie :
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 :
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) :
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 :
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 :
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