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 :

CSS - Propriété mask-repeat

Description de la propriété mask-repeat.

La propriété mask-repeat est expérimentale. Avant de l'utiliser, vérifier sa compatibilité avec les navigateurs, et si nécessaire, utilisez les préfixes spécifiques à chaque navigateur (-moz-, -webkit-, etc.).

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;

    Valeur par défaut. 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: initial;

    La valeur initiale est repeat.

  • mask-repeat: unset; mask-repeat: inherit;

    Reportez-vous à la description générale de ces valeurs.

Simulateur.

Votre navigateur ne semble pas prendre en charge les techniques de masquage. Pour l'instant (2019) le fonctionnement du simulateur n'est possible que sur Firefox.
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é).

Afficher les versions antérieures   Afficher la version à venir  

Voir aussi...

Masquage - Propriétés.

  • mask : Résumé des paramètres de masquage.
  • mask-clip : Zone concernée par le masquage.
  • mask-image : Image ou le fichier SVG qui sera utilisé comme masque
  • mask-mode : Mode de masquage (couche alpha, luminance...)
  • mask-origin : Référence pour le positionnement du masque.
  • mask-position : Position du masque.
  • mask-size : Dimensions du masque.