Définit un groupe d'options liées dans une liste déroulante
Ce chapitre traite de la propriété CSS mask-size. Découvrez sa définition, son utilisation, sa syntaxe générale, les valeurs possibles, des exemples et des conseils d'utilisation pour optimiser son utilisation
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.
La syntaxe générale de la propriété CSS mask-size est la suivante :
mask-size: auto|size|contain|cover|initial|inherit;
Les valeurs possibles pour la propriété CSS mask-size sont :
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;
}
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"; |
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>