Propriété mask-repeat
La propriété mask-repeat définit la façon dont un masque est répété si ses dimensions sont inférieures à celles de l'élément.
Fonctionne de manière similaire à background-repeat,
mais s'applique aux masques.
Syntaxe
sélecteur {
mask-repeat: repeat-x | repeat-y | repeat | space | round | no-repeat;
}
Valeurs
| Valeur | Description |
|---|---|
repeat |
Le masque est répété selon les deux axes (par défaut). |
no-repeat |
Le masque n'est pas répété. |
repeat-x |
Le masque est répété uniquement horizontalement. |
repeat-y |
Le masque est répété uniquement verticalement. |
space |
Le masque est répété avec des espacements égaux. |
round |
Le masque est mis à l'échelle pour un remplissage uniforme. |
Exemple . Sans répétition (no-repeat)
Un seul cœur au centre, sans répétition :
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask-image: url("heart.svg");
mask-position: center;
mask-size: 100px;
mask-repeat: no-repeat;
}
:
Exemple . Répétition horizontale (repeat-x)
Les cœurs se répètent uniquement horizontalement :
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask-image: url("heart.svg");
mask-position: left center;
mask-size: 50px;
mask-repeat: repeat-x;
}
:
Exemple . Répétition verticale (repeat-y)
Les cœurs se répètent uniquement verticalement :
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask-image: url("heart.svg");
mask-position: center top;
mask-size: 50px;
mask-repeat: repeat-y;
}
:
Exemple . Répétition avec espacement (space)
Les cœurs sont uniformément répartis avec des espacements :
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask-image: url("heart.svg");
mask-size: 80px;
mask-repeat: space;
}
:
Exemple . Répétition avec mise à l'échelle (round)
Les cœurs sont mis à l'échelle pour un remplissage uniforme :
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask-image: url("heart.svg");
mask-size: 80px;
mask-repeat: round;
}
:
Voir aussi
-
la propriété
mask-size,
définit la taille du masque -
la propriété
mask-position,
définit la position du masque -
la propriété
mask,
raccourci pour toutes les propriétés de masquage
