CSS - Propriété mask-origin

Description de la propriété mask-origin.

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

La propriété mask-origin définit la référence utilisée pour positionner le masque. En gros, le positionnement se fait-il par rapport au contenu de l'élément, sa bordure ou ses marges ?
La propriété mask-position définit la position du masque par rapport à cette référence.

Pour des explications plus complète sur le masquage, reportez-vous à la propriété raccourcie mask.

Valeurs pour mask-origin.

• mask-origin: content-box;

  La position du masque est déterminée par rapport au contenu de l'élément.

• mask-origin: padding-box;

  Le masque est positionné par rapport à la marge intérieure (padding) de l'élément.

• mask-origin: border-box;

  Le masque est positionné par rapport à la bordure de l'élément.

• mask-origin: fill-box; mask-origin: stroke-box; mask-origin: view-box;

  Ces trois valeurs sont applicables aux éléments du type SVG.

• mask-origin: initial;

  La valeur initiale est auto.

• mask-origin: unset; mask-origin: inherit;

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

Simulateur.

Prise en charge par les navigateurs (compatibilité).

Afficher le tableau de compatibilité (informations fournies par canIuse.com).

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