Une remarque ? Une suggestion ?...

Merci de participer à l'amélioration de ce site. Prenez le temps de rédiger votre remarque le plus précisément possible :

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-size accepte é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.

  • mask-size: unset; mask-size: inherit;

    Reportez-vous à la description générale de ces valeurs.

Simulateur.

Attention ! Votre navigateur ne semble pas prendre en charge le masquage.
mask-size :
Exemple d'utilisation de mask-size (CSS)
L'élément original
180 x 120 pixels
Masque pour mask-size (CSS)

Le masque
100 x 100 pixels
Résultat de mask-size (CSS)
Le résultat
Exemple d'utilisation de mask-size (CSS)
L'élément original
180 x 120 pixels
Le masque
dégradé circulaire
(sans dimensions)
Résultat de mask-size (CSS)
Le résultat

Prise en charge par les navigateurs (compatibilité).

Afficher les versions antérieures   Afficher la version à venir  

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 masque
  • mask-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.