CSS Masquage
La propriété mask-image en CSS
Le masquage CSS vous permet de créer une couche de masque à placer sur un élément pour cacher partiellement ou complètement certaines parties de cet élément.
La propriété CSS mask-image spécifie une image de couche de masque.
L'image de la couche de masque peut être une image PNG, une image SVG, un dégradé CSS , ou un élément SVG <mask> .
Utiliser une image PNG comme couche de masque
Pour utiliser une image PNG comme couche de masque, utilisez une valeur url() pour spécifier l'image de la couche de masque.
L'image de masque doit comporter une zone transparente ou semi-transparente. Le noir indique une transparence totale.
Voici l'image de masque ("w3logo.png") que nous allons utiliser :
Voici une image des Cinque Terre, en Italie :
Maintenant, nous appliquons l'image de masque comme couche de masque pour l'image des Cinque Terre, en Italie :
Exemple
Voici le code source :
.mask1 {
-webkit-mask-image: url(w3logo.png);
mask-image: url(w3logo.png);
mask-repeat: no-repeat;
} La propriété mask-image spécifie l'image à utiliser comme couche de masque pour un élément.
La propriété mask-repeat spécifie si et comment une image de masque sera répétée. La valeur no-repeat indique que l'image de masque ne sera pas répétée (l'image de masque ne sera affichée qu'une seule fois).
Répéter l'image de la couche de masque
Si nous omettons la propriété mask-repeat , l'image de masque sera répétée sur toute l'image des Cinque Terre, en Italie :
Exemple
Omettez la propriété mask-repeat :
.mask1 {
-webkit-mask-image: url(w3logo.png);
mask-image: url(w3logo.png);
} Positionner l'image de la couche de masque
La propriété mask-position définit la position de départ d'une image de masque (par rapport à la zone de position de masque). Par défaut, une image de masque est placée dans le coin supérieur gauche d'un élément et répétée à la fois verticalement et horizontalement.
Ici, nous positionnons l'image de masque au centre :
Exemple
Positionnez l'image de la couche de masque :
.mask1 {
-webkit-mask-image: url(w3logo.png);
mask-image: url(w3logo.png);
mask-repeat: no-repeat;
mask-position: center;
} 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 de 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 de 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 |