CSS - Propriété mask-size
Description de la propriété mask-size.
La propriété mask-size n'est pas encore standardisée par le W3C. Vérifiez sa compatibilité avant de
l'utiliser. Et si nécessaire, utilisez les préfixes des navigateurs (-moz-, -webkit-, etc.).
La propriété mask-size définit les dimensions du masque. Doit-il être agrandi ou rétréci pour couvrir
l'élément qu'il doit masquer ? Etc.
Pour plus d'information sur la technique de masquage, reportez-vous à la propriété raccourcie
mask.
Syntaxes pour mask-size.
- mask-size: auto;
Valeur par défaut. Le masque est utilisé avec ses dimensions originales.
Si le masque n'a pas de dimensions propres (dégradé, fichier svg) les dimensions du masque seront celle de l'élément masqué. - mask-size: cover;
Le masque est agrandi ou réduit pour couvrir tout l'élément masqué. Les proportions du masque sont conservées : le masque peut déborder dans une des directions.
- mask-size: contain;
Le masque est agrandi ou réduit pour tenir entièrement dans les dimensions de l'élément masqué. Les proportions du masque sont conservées : le masque peut ne pas couvrir entièrement l'élément.
- mask-size: 50px 25px;
mask-sizeaccepte également une ou deux valeurs numériques positives, avec leur unité de dimension (voir les unités de dimensions en CSS) ou exprimées en pourcentages. Ces deux valeurs définissent respectivement la largeur et la hauteur du masque. Les proportions de ce dernier peuvent donc ne pas être conservées.Les pourcentages sont calculés par rapport aux dimensions de l'élément à masquer.
Si une seule valeur est indiquée, elle définit la largeur du masque, la hauteur sera modifiée pour conserver les proportions initiales du masque.
- mask-size:
initial;La valeur initiale est
auto. -
Reportez-vous à la description générale de ces valeurs.
Simulateur.
mask-size :
L'élément original
180 x 120 pixels
Le masque
100 x 100 pixels
Le résultat
L'élément original
180 x 120 pixels
dégradé circulaire
(sans dimensions)
Le résultat
Prise en charge par les navigateurs (compatibilité).
Afficher le tableau de compatibilité (informations fournies par canIuse.com).
Voir aussi...
Masquage - Propriétés.
mask: Résumé des paramètres de masquage.mask-clip: Zone concernée par le masquage.mask-image: Image ou le fichier SVG qui sera utilisé comme masquemask-mode: Mode de masquage (couche alpha, luminance...)mask-origin: Référence pour le positionnement du masque.mask-position: Position du masque.mask-repeat: Mode de répétition du masque si celui-ci est plus petit que l'élément à masquer.