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.
Utilisable sur
HTML, SVG
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: CR (document candidat à la recommandation)

Schéma de la syntaxe de mask-repeat.

Mask-repeat property - Syntax diagramSyntax diagram of the mask-repeat CSS property. See stylescss.free.fr for details. 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:;
Schéma syntaxique de la propriété mask-repeat.
Cliquez sur les liens du schéma pour plus de précisons sur les valeurs. Télécharger le schéma en SVG

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.

  • 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; (repeat) mask-repeat: inherit; mask-repeat: revert; mask-repeat: revertLayer; mask-repeat: unset;

    Les valeurs communes sont présentées sur ces pages : initial, inherit, revert, revert-layer, unset.

Exemple interactif avec la propriété mask-repeat.

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

Compatibilité des navigateurs avec mask-repeat.

Colonne 1
Support des techniques de masquage consistant à masquer un élément par une image ou une forme géométrique.
Colonne 2
Support de la propriété mask-repeat pour définir comment est répété le masque lorsqu'il est de dimensions inférieures à l'élément à masquer.

Remarques :

(1) Nécessite le préfixe -webkit-.
Supporte les propriétés mask-image et mask-box-image mais pas les autres propriétés relatives aux masques.

1
Masquage par
une image
2
Propriété
mask-repeat
Estimation de la prise en charge globale.
92%
95%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

UC Browser pour Androïd

1

Opéra Mobile

QQ Browser

1

Baidu Browser

1

Samsung Internet

Safari

Safari sur IOS

Chrome

Opéra

Edge

Chrome pour Androïd

Firefox pour Androïd

Firefox

Androïd Brower

KaiOS Browser

Opéra mini

Voir le site Caniuse.com pour plus d'informations de compatibilité.
Caniuse
Caniuse

Histoire de la propriété mask-repeat.

  • Module CSS - Masquage - Niveau 1

    Première spécification concernant les techniques de masquage par image. Et première définition des propriétés correspondantes dont la propriété mask-repeat.
    WD
    15 Novembre 2012
    Document de travail.
    CR
    26 Août 2014
    Candidat à la recommandation.
    PR
    REC

Voir aussi, au sujet des techniques de masquage.

La propriété mask-repeat est décrite dans la spécification CSS Masking Module (ou "Module CSS - Masquage" en français). Cette norme, éditée par le W3C standardise tout ce qui concerne le masquage :
Les propriétés ci-dessous y sont également présentées :

Propriétés :

✗
clip
Découpe un élément à partir d'un rectangle.
clip-path
Définit la partie visible de l'élément, délimitée par une forme géométrique (rectangle, polygone...).
clip-rule
Définit comment gérer les formes creuses dans le contexte d'un découpage.
mask
Propriété résumée définissant les paramètres de masquage : dimensions du masque, position, répétition, origine, etc.
mask-border
Définit tous les paramètres d'un masque pour la bordure d'un élément.
⚠
mask-border-mode
Définit sur quel paramètre le masque doit agir (luminance, alpha).
⚠
mask-border-outset
Définit le décalage éventuel du masque de bordure par rapport à l'élément.
⚠
mask-border-repeat
Définit le mode de répétition du masque.
⚠
mask-border-slice
Définit comment l'image utilisée comme masque doit être découpée.
⚠
mask-border-source
Désigne l'image qui sera utilisée comme masque (masque du type bordure).
⚠
mask-border-width
Définit l'épaisseur de la bordure pour l'application d'un masque.
mask-clip
Définit la zone concernée par le masquage.
mask-composite
Définit comment seront combinés les masques lorsque plusieurs sont appliqués sur un élément.
mask-image
Désigne l'image ou le fichier SVG qui sera utilisé comme masque.
mask-mode
Définit le mode de masquage (couche alpha, luminance...)
mask-origin
Définit la référence pour le positionnement du masque.
mask-position
Définit la position du masque.
mask-size
Fixe les dimensions du masque.