Masquage CSS
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
La propriété CSS mask-imagespé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 <mask> .
Prise en charge du navigateur
Remarque : 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.
| Property | |||||
|---|---|---|---|---|---|
| mask-image | 4.0 -webkit- | 79.0 -webkit- | 53.0 | 4.0 -webkit- | 15.0 -webkit- |
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 {
-webkit-mask-image: url(w3logo.png);
mask-image:
url(w3logo.png);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
Exemple expliqué
La mask-imagepropriété spécifie l'image à utiliser comme calque de masque pour un élément.
La mask-repeatpropriété spécifie si ou comment une image de masque sera répétée. La no-repeat
valeur 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 la mask-repeatpropriété, l'image du masque sera répétée sur toute l'image des Cinque Terre, Italie :
Exemple
Voici le code source :
.mask1 {
-webkit-mask-image: url(w3logo.png);
mask-image:
url(w3logo.png);
}
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: linear-gradient(black, transparent);
mask-image: linear-gradient(black,
transparent);
}
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 {
max-width: 600px;
height: 350px;
overflow-y: scroll;
background: url(img_5terre.jpg) no-repeat;
-webkit-mask-image: linear-gradient(black, transparent);
mask-image: linear-gradient (black, transparent);
}
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:
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%);
}
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: 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));
}
Utiliser SVG comme calque de masque
<mask>L' élément SVG peut être utilisé dans un graphique SVG pour créer des effets de masquage.
<mask>Ici, nous utilisons l' élément SVG pour créer différentes couches de masque pour notre image :
Exemple
Une couche de masque SVG (formée en triangle) :
<svg width="600" height="400">
<mask id="svgmask1">
<polygon fill="#ffffff" points="200 0, 400 400, 0 400"></polygon>
</mask>
<image xmlns:xlink="http://www.w3.org/1999/xlink"
xlink:href="img_5terre.jpg" mask="url(#svgmask1)"></image>
</svg>
Exemple
Une couche de masque SVG (formée en étoile) :
<svg width="600" height="400">
<mask id="svgmask2">
<polygon fill="#ffffff" points="100,10 40,198 190,78 10,78
160,198"></polygon>
</mask>
<image xmlns:xlink="http://www.w3.org/1999/xlink"
xlink:href="img_5terre.jpg" mask="url(#svgmask2)"></image>
</svg>
Exemple
Une couche de masque SVG (formée en cercles) :
<svg width="600" height="400">
<mask
id="svgmask3">
<circle fill="#ffffff" cx="75" cy="75"
r="75"></circle>
<circle fill="#ffffff" cx="80"
cy="260" r="75"></circle>
<circle fill="#ffffff"
cx="270" cy="160" r="75"></circle>
</mask>
<image
xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="img_5terre.jpg"
mask="url(#svgmask3)"></image>
</svg>
Propriétés de masquage CSS
Le tableau suivant répertorie toutes les propriétés de masquage CSS :
| Property | Description |
|---|---|
| mask-image | Specifies an image to be used as a mask layer for an element |
| mask-mode | Specifies whether the mask layer image is treated as a luminance mask or as an alpha mask |
| mask-origin | Specifies the origin position (the mask position area) of a mask layer image |
| mask-position | Sets the starting position of a mask layer image (relative to the mask position area) |
| mask-repeat | Specifies how the mask layer image is repeated |
| mask-size | Specifies the size of a mask layer image |