-webkit-mask-repeat-x

Non standard
Cette fonctionnalité n'est ni standard, ni en voie de standardisation. Ne l'utilisez pas pour des sites accessibles sur le Web : elle ne fonctionnera pas pour tout utilisateur. Il peut également y avoir d'importantes incompatibilités entre les implémentations et son comportement peut être modifié dans le futur.

La propriété -webkit-mask-repeat-x définit la façon dont une image de masque est répétée horizontalement.

Valeur initialerepeat
Applicabilitétous les éléments
Héritéenon
Médiavisuel
Valeur calculéecomme spécifié
Animablenon
Ordre canoniquel'ordre d'apparition dans la grammaire formelle des valeurs

Syntaxe

/* Valeurs avec un mot-clé */
-webkit-mask-repeat-x: repeat;
-webkit-mask-repeat-x: no-repeat;
-webkit-mask-repeat-x: space;
-webkit-mask-repeat-x: round;

/* Valeurs multiples */
-webkit-mask-repeat-x: repeat, no-repeat, space;

/* Valeurs globales */
-webkit-mask-repeat-x: inherit;
-webkit-mask-repeat-x: initial;
-webkit-mask-repeat-x: unset;

Valeurs

repeat
L'image de masque est répétée horizontalement.
no-repeat
L'image de masque n'est pas répétée horizontalement, seul un exemplaire est dessiné selon l'axe horizontal. Le contenu restant sur l'axe horizontal pour les éléments masqués n'est pas affiché.
space
L'image est répétée tant que possible sans être rognée. La première et la dernière images sont accolées aux bords droit et gauche de l'élément et l'espace restant est réparti entre les copies de l'image. La propriété mask-position est ignorée sauf si une seule image peut être affichée sans qu'il n'y ait de rognage. On aura uniquement du rognage s'il n'y a pas suffisamment d'espace pour afficher une seule image.
round
L'image est répétée et les différents exemplaires sont tous étirés de la même façon afin qu'il n'y ait pas d'espace entre chaque. Ainsi, une image qui mesure originellement 260px et qui est répétée trois fois pourra être étirée jusqu'à ce que chaque répétition soit large de 300px, ensuite une autre image sera ajoutée et toutes seront compressées à 225px.

Syntaxe formelle

repeat | no-repeat | space | round

Exemples

.exempleun {
  -webkit-mask-image: url('mask.png');
  -webkit-mask-repeat-x: repeat;
}

.exempledeux {
  -webkit-mask-image: url('mask.png');
  -webkit-mask-repeat-x: no-repeat;
}

Gestion de plusieurs images

On peut définir un style de répétition (<repeat-style>) différent pour chacune des images de masque en séparant les valeurs par des virgules :

.exempletrois {
  -webkit-mask-image: url('mask1.png'), url('mask2.png');
  -webkit-mask-repeat-x: repeat, space;
} 

Chaque image aura la valeur associée, dans le même ordre.

Compatibilité des navigateurs

Fonctionnalité Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Support simple Pas de support[1] Pas de support Pas de support Pas de support[1] ?
Fonctionnalité Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Support simple ? ? ? ? ?

[1] Bien que la propriété soit reconnue, aucune des valeurs n'est acceptée.

Voir aussi

Étiquettes et contributeurs liés au document

 Contributeurs à cette page : SphinxKnight
 Dernière mise à jour par : SphinxKnight,