Définit un groupe d'options liées dans une liste déroulante
La propriété CSS mask-size
La propriété CSS mask-size permet de définir la taille de la zone de masquage. Il s'agit d'une propriété qui peut être utilisée avec la propriété mask-image pour créer des effets de masquage complexes sur des éléments HTML.
Syntaxe générale
La syntaxe générale de la propriété CSS mask-size est la suivante :
mask-size: auto|size|contain|cover|initial|inherit;
Valeurs possibles
Les valeurs possibles pour la propriété CSS mask-size sont :
- auto : la taille de la zone de masquage est déterminée par la taille de l'élément HTML
- size : la taille de la zone de masquage est définie en utilisant des unités CSS telles que px, em, etc.
- contain : la taille de la zone de masquage est déterminée en fonction de la taille de l'image masquante
- cover : la taille de la zone de masquage est déterminée en fonction de la taille de l'image masquante et de la taille de l'élément HTML
- initial : définit la valeur par défaut de la propriété
- inherit : hérite de la valeur parente
Exemples
Considérons le code HTML suivant :
<div class="masked-element"></div>
Pour définir la taille de la zone de masquage à 200px par 200px, nous pouvons utiliser le code CSS suivant :
.masked-element {
mask-size: 200px 200px;
}
Pour définir la taillede la zone de masquage en utilisant la valeur contain, nous pouvons utiliser le code CSS suivant :
.masked-element {
mask-size: contain;
}
Conseils et astuces d'utilisation
- Assurez-vous d'utiliser une image suffisamment grande pour le masquage afin d'obtenir les meilleurs résultats.
- Si vous utilisez la valeur contain, il est recommandé de redimensionner l'image masquante pour qu'elle soit proportionnelle à la taille de l'élément HTML.
- Pour obtenir des effets de masquage plus complexes, vous pouvez utiliser des images transparentes et des couleurs d'arrière-plan pour les combiner.
En utilisant la propriété CSS mask-size de manière judicieuse, vous pouvez créer des effets de masquage élégants et professionnels sur vos éléments HTML.
| Valeurs par défaut | auto |
|---|---|
| Inherited: | non |
| Animable : | non En savoir plus sur l'animable |
| Version: | CSS3 |
| Syntaxe JavaScript: | object.style.maskSize="100px 200px"; |
Prise en charge de la propriété dans les navigateurs
Les numéros figurant dans le tableau indiquent la première version du navigateur qui prend totalement en charge la propriété.Les numéros suivis de -webkit- indiquent la première version qui fonctionne avec un préfixe.
| Explorateur |  |  |  |  |  |
|---|---|---|---|---|---|
| Verssion | 4 -webkit- | 79 -webkit- | 53 | 4 -webkit- | 15 -webkit- |
Exemple : 📋 Copier le code
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>CSS la propriété mask-size </title>
<style>
.mask1 {
width: 600px;
height: 400px;
background: green;
border:solid red 10px;
padding: 50px;
-webkit-mask-image: url(images/LOGOmASK.png);
mask-image: url(images/LOGOmASK.png);
-webkit-mask-size: 200px;
mask-size: 200px;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
.mask2 {
width: 600px;
height: 400px;
background: green;
border: solid red 10px;
padding: 50px;
-webkit-mask-image: url(images/LOGOmASK.png);
mask-image: url(images/LOGOmASK.png);
-webkit-mask-size: 50%;
mask-size: 50%;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
</style>
</head>
<body>
<h1>La propriété css mask-size </h1>
<h3>Définir mask-size : 200px </h3>
<div class="mask1">
<img src="images/village.png" alt="village " width="600" height="400">
</div>
<h3>Définir mask-size: 50% </h3>
<div class="mask2">
<img src="images/village.png" alt="village " width="600" height="400">
</div>
</body>
</html>