Propriété mask-repeat CSS

Page précédente mask-position
Page suivante mask-size

Définition et utilisation

mask-repeat L'attribut définit si et comment l'image de masque doit se répéter.

Par défaut, l'image de masque se répète dans les deux directions verticale et horizontale.

Exemple

Exemple 1

utiliser mask-repeat: no-repeat; et mask-repeat: repeat;:

.mask1 {
  -webkit-mask-image: url(w3logo.png);
  mask-image: url(w3logo.png);
  mask-size: 50%;
  mask-repeat: no-repeat;
}
.mask2 {
  -webkit-mask-image: url(w3logo.png);
  mask-image: url(w3logo.png);
  mask-size: 50%;
  mask-repeat: repeat;
}

Essayez-le vous-même

Exemple 2

utiliser mask-repeat: round; et mask-repeat: space;:

.mask1 {
  -webkit-mask-image: url(w3logo.png);
  mask-image: url(w3logo.png);
  mask-size: 30%;
  mask-repeat: round;
}
.mask2 {
  -webkit-mask-image: url(w3logo.png);
  mask-image: url(w3logo.png);
  mask-size: 30%;
  mask-repeat: space;
}

Essayez-le vous-même

Exemple 3

utiliser mask-repeat: repeat-x; et mask-repeat: repeat-y;:

.mask1 {
  -webkit-mask-image: url(w3logo.png);
  mask-image: url(w3logo.png);
  mask-size: 30%;
  mask-repeat: repeat-x;
}
.mask2 {
  -webkit-mask-image: url(w3logo.png);
  mask-image: url(w3logo.png);
  mask-size: 30%;
  mask-repeat: repeat-y;
}

Essayez-le vous-même

Syntaxe CSS

mask-repeat: repeat|repeat-x|repeat-y|space|round|no-repeat|initial|inherit;

Valeur de l'attribut

Valeur	Description
repeat	L'image de masque se répète dans les deux directions verticale et horizontale. Si la dernière image ne convient pas, elle sera coupée. C'est la valeur par défaut.
repeat-x	L'image de masque ne se répète que dans la direction horizontale.
repeat-y	L'image de masque ne se répète que dans la direction verticale.
space	L'image de masque se répète le plus possible sans être coupée. La première et la dernière image sont fixées aux deux côtés de l'élément, et l'espace entre les images est réparti uniformément.
round	L'image de masque se répète et est compressée ou étirée pour remplir l'espace (sans间隙).
no-repeat	L'image de masque ne se répète pas. L'image n'est affichée qu'une seule fois.
initial	Réinitialise cette propriété à sa valeur par défaut. Voir : initial.
inherit	Inherits this property from its parent element. Voir : inherit.

Détails techniques

Valeur par défaut :	repeat
Héritabilité :	Non
Création d'animation :	Non pris en charge. Voir :Attributs liés aux animations.
Version :	Module de masquage CSS Niveau 1
Syntaxe JavaScript :	object.style.maskRepeat="no-repeat"