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

Description de la propriété mask-mode.

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

La propriété mask-mode définit le type de masquage.

Reportez-vous à la propriété mask pour des explications plus complète sur la technique de masquage.

Valeurs pour mask-mode.

  • mask-mode: alpha;

    C'est le canal alpha, c'est à dire la transparence du masque qui est utilisée. La transparence du masque est appliquée à l'élément.

    Cela suppose donc un masque dans un format capable de traiter la transparence : png, gif, svg...

  • mask-mode: luminance;

    C'est la luminance du masque qui est utilisée. Autrement dit, l'élément deviendra invisible dans les zones où le masque est noir ; l'élément sera inchangé dans les zones où le masque est blanc. Les zones de luminosité intermédiaire du masque rendront l'élément plus ou moins transparent.

  • mask-mode: match-source;

    C'est la valeur par défaut. Le choix alpha ou luminance est fait en fonction du type du masque.

  • mask-mode: initial;

    La valeur initiale est match-source.

  • mask-mode: unset; mask-mode: inherit;

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

Simulateur.

Attention ! Votre navigateur ne semble pas prendre en charge les techniques de masquage.
mask-mode :
Image d'origine de la propriété CSS mask-mode
L'élément original
Masque pour la propriété CSS mask-mode
Le masque
Exemple d'utilisation de la propriété CSS mask-mode
Le résultat
Image d'origine de la propriété CSS mask-mode
L'élément original
Masque pour la propriété CSS mask-mode
Le masque
Exemple d'utilisation de la propriété CSS mask-mode
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-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.