Propriété CSS mask-repeat

Syntaxe

/* Syntaxe avec une valeur */
mask-repeat: repeat-x;
mask-repeat: repeat-y;
mask-repeat: repeat;
mask-repeat: space;
mask-repeat: round;
mask-repeat: no-repeat;

/* Syntaxe avec deux valeurs : horizontal | vertical */
mask-repeat: repeat space;
mask-repeat: repeat repeat;
mask-repeat: round space;
mask-repeat: no-repeat round;

/* Plusieurs valeurs */
mask-repeat:
  space round,
  no-repeat;
mask-repeat:
  round repeat,
  space,
  repeat-x;

/* Valeurs globales */
mask-repeat: inherit;
mask-repeat: initial;
mask-repeat: revert;
mask-repeat: revert-layer;
mask-repeat: unset;

Valeurs

La propriété mask-repeat est une liste séparée par des virgules de deux valeurs <repeat-style>, la première valeur <repeat-style> étant la valeur de répétition horizontale et la deuxième valeur étant la valeur de répétition verticale, ou un mot-clé unique qui est un raccourci pour deux valeurs <repeat-style>.

Valeurs <repeat-style>

Les valeurs <repeat-style> incluent :

repeat

L'image est répétée autant de fois que nécessaire pour couvrir toute la zone de peinture du masque. Les images de masque le long des bords sont découpées lorsque la taille de la boîte d'origine du masque n'est pas un multiple exact de la taille de l'image du masque.

space

L'image du masque est répétée autant de fois que possible sans être découpée. Si la taille de l'origine de l'élément est au moins deux fois supérieure à la taille de l'image du masque dans la dimension associée, la propriété mask-position est ignorée et les première et dernière images sont positionnées aux bords du conteneur de l'origine du masque. Si la boîte d'origine du masque n'est pas un multiple exact de la taille de l'image du masque, l'espace blanc est réparti uniformément entre les images de masque répétées.

Si la taille de la boîte d'origine est inférieure à deux fois la taille de l'image du masque dans la dimension donnée, une seule image de masque peut être affichée. Dans ce cas, l'image est positionnée comme défini par la propriété mask-position, qui par défaut est 0% 0%. L'image du masque ne sera découpée que si l'image du masque est plus grande que la boîte d'origine du masque.

round

L'image du masque est répétée autant de fois que possible dans ses dimensions d'origine. Si la taille de la boîte d'origine du masque n'est pas un multiple exact de la taille de l'image du masque, toutes les images du masque seront redimensionnées, rétrécies ou étirées pour s'assurer qu'aucune répétition n'est découpée.

no-repeat

L'image du masque n'est pas répétée (et donc la zone de peinture du masque ne sera pas nécessairement entièrement couverte). La position de l'image du masque non répétée est définie par la propriété CSS mask-position.

Valeurs raccourcies

La syntaxe à une valeur est un raccourci pour la syntaxe complète à deux valeurs :