Une remarque ? Une suggestion ?...

Merci de participer à l'amélioration de ce site. Prenez le temps de rédiger votre remarque le plus précisément possible :

mask-repeat - Propriété CSS

mask-repeat

Résumé des caractéristiques de la propriété mask-repeat

Description rapide
Définit le mode de répétition du masque lorsque celui-ci est plus petit que l'élément à masquer.
Statut
Standard
S'applique à
HTML : tous les éléments.
SVG : containers.
Type de valeur
Valeur prédéfinie
Valeurs prédéfinies
repeat | repeat-x | repeat-y | no-repeat | space | round
Pourcentages
Ne s'appliquent pas.
Valeur initiale
repeat
Héritée par défaut
Non
Type d'animation
Discrète : lors d'une animation, la propriété mask-repeat passe d'une valeur à l'autre sans transition.
Module W3C
Module CSS - Masquage
Références (W3C)
Statut du document:: CRD (document proposé pour la recommandation)

Description de la propriété mask-repeat.

La propriété 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.

Syntaxe de mask-repeatSchéma syntaxique de la propriété CSS mask-repeat (gestion du masquage). repeat-x repeat-x repeat-y repeat-y repeat repeat no-repeat no-repeat space space round round {1,2} {1,2} , ,mask-repeat:;mask-repeat:;Télécharger l'image en SVG
  • 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 et space 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.

mask-repeat :
La propriété CSS mask-repeat (exemple)
L'élément original
180 x 120 pixels
La propriété CSS mask-repeat (masque)




Le masque
50 x 50 pixels
La propriété CSS mask-repeat (résultat)
Le résultat

Prise en charge par les navigateurs (compatibilité).

Colonne 1
Support du masquage par les navigateur (technique consistant à découper un élément d'après une image ou une forme géométrique).
Colonne 2
Compatibilité des navigateurs avec la propriété mask-repeat
1
Masking
2
mask-repeat
Estimation de la prise en charge en pourcentage du parc actuel.
73%
95%

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.

Propriétés.

Définit la partie visible de l'élément (découpage).
Définit la partie visible de l'élément, délimitée par une forme géométrique (rectangle, polygone...)
Définit comment gérer les formes creuses.
Résumé des paramètres de masquage.
Définit tous les paramètres d'un masque pour la bordure d'un élément.
Définit comment le masque doit agir (luminance, alpha).
Définit le décalage éventuel du masque de bordure éventuel par rapport à l'élément.
Définit le mode de répétition du masque.
Définit comment l'image utilisée comme masque doit être découpée.
Désigne l'image qui sera utilisée comme masque (masque du type bordure).
Définit l'épaisseur de la bordure pour l'application d'un masque.
Définit la zone concernée par le masquage.
Définit comment seront combinés les masques lorsque plusieurs sont appliqués sur un élément.
Désigne l'image ou le fichier SVG qui sera utilisé comme masque.
Définit le mode de masquage (couche alpha, luminance...)
Définit la référence pour le positionnement du masque.
Position du masque.
Fixe les dimensions du masque.