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-y définit la façon dont une image de masque est répétée verticalement.
/* Valeurs avec un mot-clé */ -webkit-mask-repeat-y: repeat; -webkit-mask-repeat-y: no-repeat; -webkit-mask-repeat-y: space; -webkit-mask-repeat-y: round; /* Valeurs multiples */ -webkit-mask-repeat-y: repeat, no-repeat, space; /* Valeurs globales */ -webkit-mask-repeat-y: inherit; -webkit-mask-repeat-y: initial; -webkit-mask-repeat-y: unset;
| Valeur initiale | repeat |
|---|---|
| Applicabilité | tous les éléments |
| Héritée | non |
| Média | visuel |
| Valeur calculée | pour length, la valeur absolue, sinon un pourcentage |
| Type d'animation | discrète |
| Ordre canonique | l'ordre d'apparition dans la grammaire formelle des valeurs |
Syntaxe
Valeurs
repeat- L'image de masque est répétée verticalement.
no-repeat- L'image de masque n'est pas répétée verticalement, seul un exemplaire est dessiné selon l'axe vertical. Le contenu restant sur l'axe vertical 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 bas et haut de l'élément et l'espace restant est réparti entre les copies de l'image. La propriété
mask-positionest 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 repé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 haute 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-y: repeat;
}
.exempledeux {
-webkit-mask-image: url('mask.png');
-webkit-mask-repeat-y: 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-y: repeat, space;
}
Chaque image aura la valeur associée, dans le même ordre.
Compatibilité des navigateurs
Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter https://github.com/mdn/browser-compat-data et à nous envoyer une pull request.
Update compatibility data on GitHub
| Ordinateur | Mobile | ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | Webview Android | Chrome pour Android | Edge Mobile | Firefox pour Android | Opera pour Android | Safari pour iOS | Samsung Internet | |
| Support simple | Chrome Support complet Oui | Edge Support complet 18 | Firefox Aucun support Non | IE Aucun support Non | Opera Support complet Oui | Safari ? | WebView Android Support complet Oui | Chrome Android Support complet Oui | Edge Mobile ? | Firefox Android ? | Opera Android Support complet Oui | Safari iOS ? | Samsung Internet Android ? |
Légende
- Support complet
- Support complet
- Aucun support
- Aucun support
- Compatibilité inconnue
- Compatibilité inconnue
- Fonctionnalité non-standard. Celle-ci peut être incorrectement supportée par les autres navigateurs.
- Fonctionnalité non-standard. Celle-ci peut être incorrectement supportée par les autres navigateurs.
Voir aussi
Étiquettes et contributeurs liés au document
Étiquettes :
Contributeurs à cette page :
SphinxKnight
Dernière mise à jour par :
SphinxKnight,