mask-repeat - Propriété CSS
Résumé des caractéristiques de la propriété mask-repeat
SVG : containers.
repeat
| repeat-x
| repeat-y
| no-repeat
| space
| round
repeat
mask-repeat
passe d'une valeur à l'autre sans transition.Description de la propriété mask-repeat
.
mask-repeat
, de même que la technique de masquage en elle même, pose encore des problèmes de compatibilité.
Doublez les syntaxes avec la variante -webkit-
mask-repeat
pour améliorer la compatibilité, en particulier sur Chrome et Edge.
Le masquage consiste à cacher certaines parties d'un élément HTML en fonction d'une image ou d'un fichier SVG désigné comme le masque.
mask-repeat
définit le mode de répétition du masque lorsqu'il est plus petit que l'élément à masquer.
Le fonctionnement de cette propriété est comparable à celui de background-repeat
qui gère la répétition du fond graphique de l'élément.
Pour des explications plus complète sur le masquage, reportez-vous à la propriété raccourcie mask
.
Valeurs pour mask-repeat
.
- mask-repeat: repeat;
Le masque est reproduit autant de fois que nécessaire pour couvrir l'élément à masquer. Les proportions du masque sont conservées. Les copies du masque situées aux extrémités peuvent être tronquées.
- mask-repeat: repeat-x;
Le masque est reproduit suivant l'axe horizontal mais pas suivant l'axe vertical. Les proportions du masque sont conservées. Les copies des extrémités peuvent être tronquées.
- mask-repeat: repeat-y;
Le masque est reproduit suivant l'axe vertical mais pas suivant l'axe horizontal. Les proportions du masque sont conservées. Les copies des extrémités peuvent être tronquées.
- mask-repeat: no-repeat;
Le masque est utilisé une seule fois, sans reproduction ni suivant l'axe horizontal, ni suivant l'axe vertical.
- mask-repeat: space;
Le masque est reproduit tout en gardant sa dimension originale. Un espacement est ajouté entre chaque copie du masque pour que ce dernier soit visible en entier, même aux extrémités.
- mask-repeat: round;
Le masque est reproduit en modifiant ses dimensions pour que un nombre exact de copies couvrent l'élément à masquer. Aucune copie n'est tronquée mais les proportions peuvent du masque peuvent être modifiées.
- mask-repeat: round space;
Deux valeurs peuvent être indiquées, séparées par une espace. Cela permet de gérer la répétition du masque différemment suivant l'axe horizontal et l'axe vertical.
Cependant, la plupart des valeurs sont spécifiques à un des axes (
repeat-x
est clairement une valeur qui concerne l'axe horizontal), cette possibilité d'indiquer deux valeurs n'est donc intéressante que dans deux cas de figure :round space
etspace round
. - mask-repeat: repeat, no-repeat;
Lorsque plusieurs valeurs sont indiquées, séparées par des virgules, elles s'appliquent aux différentes masques qui ont été appliqués à l'élément. La première valeur s'appliquant au premier masque, la deuxième au second, etc.
Si vous souhaitez des explications plus complète sur l'application de plusieurs masques, reportez-vous à la page sur les masques multiples.
- mask-repeat:
initial
; mask-repeat:inherit
; mask-repeat:revert
; mask-repeat:revert-layer
; mask-repeat:unset
;La valeur initiale est :
.repeat
Simulateur.
L'élément original
180 x 120 pixels
Le masque
50 x 50 pixels
Le résultat
Prise en charge par les navigateurs (compatibilité).
mask-repeat
mask-repeat
Navigateurs sur ordinateurs :
Navigateurs sur mobiles :
Navigateurs obsolètes ou marginaux :
Androïd Brower
Baidu Browser
Chrome
Chrome pour Androïd
Edge
Firefox
Firefox pour Androïd
Internet Explorer
KaiOS Browser
Opéra
Opéra Mobile
QQ Browser
Safari
Safari sur IOS
Samsung Internet
Oméra mini
Voir aussi, dans le même module de standardisation que mask-repeat
.
Les spécifications CSS éditées par le W3C sont organisées en modules. mask-repeat
fait partie du Module CSS - Masquage (CSS Masking Module). Les définitions suivantes sont également décrites dans ce même module.