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-image

Description de la propriété mask-image.

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

La propriété mask-image définit le masque à utiliser pour masquer l'élément. Le masque peut être une image, un dégradé ou un fichier SVG.

Reportez-vous à la propriété raccourcie mask pour plus de précisions sur la technique de masquage.

Valeurs pour mask-image.

  • mask-image: none;

    Valeur par défaut. Aucun masque n'est appliqué à l'élément : ce dernier est donc visible en entier.

  • mask-image: url('chemin/fichier'); mask-image: image('chemin/fichier');

    Ces deux fonctions définissent le chemin d'accès et le nom de fichier du masque. Ce dernier peut être une image ou un fichier SVG.

    Reportez-vous éventuellement à la description des fonctions url() et image().

  • mask-image: linear-gradient(...); mask-image: radial-gradient(...); mask-image: conic-gradient(...);

    Le masque est un dégradé de couleurs, défini par l'une des fonctions de dégradé.

    Pour davantage de précision sur la syntaxe des fonctions de dégradé, reportez-vous à la description de ces fonctions : linear-gradient(), radial-gradient() et conic-gradient.

  • mask-image: url(...), url(...);

    Combinaison de plusieurs masques. Les différents masques sont séparés par des virgules. Toutes les syntaxes valides pour un masque unique (image, dégradé, fichier SVG) peuvent être utilisées dans cette syntaxe à plusieurs masques.

  • mask-image: initial;

    La valeur initiale est none.

  • mask-image: unset; mask-image: inherit;

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

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-mode : Mode de masquage (couche alpha, luminance...)
  • mask-origin : Référence pour le positionnement du masque.
  • mask-position : Position du masque.
  • mask-repeat : Mode de répétition du masque si celui-ci est plus petit que l'élément à masquer.
  • mask-size : Dimensions du masque.