Masque-taille - Astuces CSS

Anonim

En CSS, la propriété mask-size spécifie la taille d'une image de calque de masque. À bien des égards, cela fonctionne très bien comme la background-sizepropriété.

.element ( mask-image: url(star.svg); mask-size: 200px 100px; )

Le masquage vous permet d'afficher des parties sélectionnées d'un élément tout en masquant le reste. La taille du masque est définie par la mask-sizepropriété.

Dans la démo suivante, vous pouvez jouer avec la taille de l'image du calque de masque:

Syntaxe

mask-size: = ( = | | auto )(1,2) | cover | contain
  • Valeur initiale: auto
  • S'applique à: Tous les éléments. En SVG, il s'applique aux éléments conteneurs à l'exclusion de l' élément, de tous les éléments graphiques et de l' élément
  • Héritée: non
  • Type d'animation: liste répétable

Cela signifie essentiellement que la syntaxe accepte une valeur de taille d'arrière-plan ( ) qui peut être une ou deux longueurs et / ou des pourcentages ( ), définie sur autoou l'un des deux mots-clés ( coveret contain).

  • Lorsque deux valeurs sont utilisées, la première valeur spécifie la largeur de l'image de masque et la seconde valeur spécifie sa hauteur .
  • Lorsqu'une valeur non contenue ou non couverte est utilisée, elle définit la largeur de l'image de masque et la hauteur est supposée être auto.

Valeurs

/* Lengths */ mask-size: 200px; /* width is 200px and height is auto */ mask-size: 50% 100%; /* width is 50% and height is 100% */ 
 /* Keywords */ mask-size: contain; mask-size: cover; 
 /* Global values */ mask-size: auto; mask-size: intial; mask-size: inherit; mask-size: unset;

Définitions de valeur

  • : Toute longueur CSS valide et non-négatifs, tels que px, em, remet %, entre autres.
  • : Spécifie la taille de l'image du calque de masque sous la forme d'un pourcentage par rapport à la zone de positionnement du masque, qui est définie par la valeur de mask-origin. Par défaut, cette valeur est border-box, ce qui signifie qu'elle contient les bordures, le remplissage et le contenu de la boîte.
  • auto: La hauteur et la largeur intrinsèques de l'image du masque sont utilisées et, pour les images telles que les dégradés qui n'ont pas de dimensions intrinsèques, elles sont rendues à la taille de la zone de positionnement du masque.
  • contain: Met à l'échelle l'image du masque tout en préservant sa proportion intrinsèque de manière à ce que sa largeur et sa hauteur puissent s'adapter à l'intérieur de la zone de positionnement du masque. Pour les images telles que les dégradés qui n'ont pas de dimensions intrinsèques, elles sont rendues à la taille de la zone de positionnement du masque.
  • cover: Met à l'échelle l'image du masque tout en préservant sa proportion intrinsèque de manière à ce que sa largeur et sa hauteur puissent couvrir entièrement la zone de positionnement du masque. Pour les images telles que les dégradés qui n'ont pas de dimensions intrinsèques, elles sont rendues à la taille de la zone de positionnement du masque.
  • initial: Applique le paramètre par défaut de la propriété, à savoir auto.
  • inherit: Adopte la valeur de taille de masque du parent.
  • unset: Supprime le courant mask-sizede l'élément.

Utiliser plusieurs valeurs

Cette propriété peut prendre une liste de valeurs séparées par des virgules pour les tailles de masque et chaque valeur est appliquée à une image de calque de masque correspondante spécifiée dans la mask-imagepropriété.

Dans l'exemple suivant, la première valeur spécifie la taille de la première image, la deuxième valeur spécifie la taille de la deuxième image, et ainsi de suite.

.element ( mask-image: url(image1.png.webp), url(image2.png.webp), url(image3.png.webp); mask-size: 100px 100%, auto, contain; )

La autovaleur

Si la valeur de la mask-sizepropriété est spécifiée comme autosuit:

.element ( mask-size: auto auto; /* or */ mask-size: auto; )

… Puis l'image du masque est mise à l'échelle dans les directions correspondantes afin de conserver son rapport hauteur / largeur. Cela dit, nous pouvons obtenir divers résultats en fonction des dimensions intrinsèques et de la proportion de l'image.

Proportion / Dimension Aucune dimension intrinsèque Une dimension intrinsèque Les deux dimensions intrinsèques
A une proportion Rendu comme si contenir avait été spécifié à la place Rendu à la taille déterminée par cette dimension et la proportion Rendu à cette taille
Aucune proportion Rendu à la taille de la zone de positionnement du masque Rendu à l'aide de la dimension intrinsèque et de la dimension correspondante de la zone de positionnement du masque N / A

Si la valeur de mask-sizeest spécifiée avec autoet une autre valeur non automatique comme celle-ci:

.element ( mask-size: auto 200px; )

… alors:

  • si l'image a une proportion intrinsèque , la valeur automatique est calculée en utilisant la dimension spécifiée et la proportion intrinsèque.
  • si l'image n'a pas de proportion intrinsèque , la valeur auto devient la dimension intrinsèque correspondante de l'image si elle existe et, dans le cas contraire, auto sera la dimension correspondante de la zone de positionnement du masque.

Comprendre coveretcontain

La vidéo suivante explique le fonctionnement des mots-clés contenir et couvrir. Notez que la position initiale d'un calque de masque est au centre de la zone de positionnement:

Si l'image n'a pas de rapport hauteur / largeur intrinsèque, alors la spécification de couverture ou de contenu rend l'image de masque à la taille de la zone de positionnement de masque.

Et qu'est-ce que diable est une dimension intrinsèque et une proportion intrinsèque?

Les dimensions intrinsèques sont la largeur et la hauteur d'un élément et la proportion intrinsèque est leur rapport.

  • Une image bitmap comme un format PNG, a toujours des dimensions intrinsèques et une proportion intrinsèque.
  • Une image vectorielle comme un format SVG, peut avoir les deux dimensions intrinsèques. Par conséquent, il a également une proportion intrinsèque. Il peut également avoir une ou aucune dimension intrinsèque et, dans les deux cas, il peut ou non avoir une proportion intrinsèque.
  • Les dégradés sont comme des images sans dimensions intrinsèques ni proportion intrinsèque.

Prise en charge du navigateur

C'EST À DIRE Bord Firefox Chrome Safari Opéra
Non 18 ans et plus 53+ Tout 4+ 70
Chrome Android Android Firefox Navigateur Android Safari sur iOS Opera Mini
85+ 79+ 4.4+ Tout Tout
Source: caniuse

Démo

La démo suivante utilise une longueur pour la taille du masque. Essayez de changer la valeur en d'autres types de valeurs dans le code et vérifiez le résultat.

Plus d'information

  • Module de masquage CSS niveau 1
  • Détourage et masquage en CSS
  • Découpage ou masquage: quand les utiliser
  • # 185: Jouer avec les masques CSS (vidéo)