Mask-position - Propriété CSS

Schéma de la syntaxe de mask-position.

Description des termes utilisés sur le schéma :

• length sont des valeurs numériques positives ou négatives, suivies d'une des unités de dimension.
• % sont des pourcentages calculés par rapport à la largeur ou la hauteur de l'élément.
• Cette syntaxe peut être répétée autant de fois qu'il y a de masques définis, en séparant les occurrences par des virgules.

Description de la propriété mask-position.

La technique de masquage consiste à cacher (entièrement ou partiellement) certaines parties d'un élément en fonction d'une image ou d'un fichier SVG choisi comme étant le masque.

Définit comment est positionné le masque par rapport à l'élément qu'il doit masquer. Ce positionnement se fait par rapport à une référence qui est définie par mask-origin (bordure de l'élément son contenu, etc). mask-position est en fait une propriété raccourcie qui est équivalent aux deux propriétés suivantes:

• mask-position-x : position horizotnale du masque .
• mask-position-y : position verticale du masque .

Pour des explications plus complètes sur la technique de masquage, reportez-vous à la propriété mask.
Voyez aussi la propriété mask-origin qui influence également le positionnement du masque.

Valeurs pour mask-position.

• mask-position: left bottom; x y

  mask-position accepte deux valeurs, séparées par un espace. La première valeur (x) indique le positionnement horizontal du masque, et la deuxième (y) son positionnement vertical.

  Ce positionnement est dans tous les cas, calculé par rapport à l'origine définie par mask-origin.

  La valeur x peut être left, center ou right.
  La valeur y peut être top, center ou bottom.
  

  Si une seule valeur est indiquée, l'autre est fixée par défaut à center.

• mask-position: 50px 25px; x y

  Le positionnement du masque peut également être indiqué par des valeurs numériques, suivies d'une unité de dimension (voir les unités de dimension). Ces valeurs peuvent être positives ou négatives.

  S'il s'agit de pourcentages, il seront calculés, pour x par rapport à la largeur de l'élément, et par rapport à sa hauteur pour le pourcentage y. Le calcul prend en compte les dimensions du masque, de façon à ce que 50% corresponde à un masque centré.

  Pour le positionnement horizontal du masque, la formule est la suivante :
  x% x (L - l)
x% est le pourcentage indiqué.
  L est la largeur de l'élément.
  l est la largeur du masque.
  

  Exemple pour un élément qui mesure 800 pixels de large et un masque de 50 pixels de large. Si le positionnement est demandé à 50%, le bord gauche du masque sera à 375 pixels (et non pas 400) :
  50% x (800 - 50) = 375 pixels.

  Si une seule valeur est indiquée, elle est appliquée au positionnement horizontal du masque. Son positionnement vertical est fixé à la valeur center.

• mask-position: right 20px bottom 10px; x y

  Cette syntaxe permet de positionner le masque par rapport à un quelconque des côtés, et non pas forcément par rapport au bord gauche et au bord du haut.

  Notre exemple signifie que le masque doit être positionné à 20 pixels du bord droit et à 10 pixels du bord du bas.

• mask-position: center bottom, left center; x1 y1 x2 y2

  Lorsque plusieurs séries de valeurs sont énumérées en les séparant par des virgules. Elles s'appliquent chacune à un masque différent. Cette syntaxe peut être employée lorsque plusieurs masques sont appliqués à un élément. Pour plus d'informations, reportez-vous à la page sur les masques multiples en CSS.

• mask-position: initial; (0% 0%) mask-position: inherit; mask-position: revert; mask-position: revertLayer; mask-position: unset;

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

Exemple d'animation de mask-position.

La propriété mask-position peut être animée de façon très fluide. Sur cet exemple, un masque circulaire dévoile successivement toutes les parties de l'image.

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

L'élément original : une image avec une marge intérieure (padding) et une bordure

Le masque

Le résultat

CSS est l’acronyme de « Cascading Style Sheets » ce qui signifie en français « feuilles de styles en cascade ». Le CSS correspond est un langage déclaratif (non algorithmique) permettant de mettre en forme et de mettre en page des documents HTML ou XML.

L'élément original : un texte, avec une marge intérieure (padding) et une bordure

Le masque

CSS est l’acronyme de « Cascading Style Sheets » ce qui signifie en français « feuilles de styles en cascade ». Le CSS correspond est un langage déclaratif (non algorithmique) permettant de mettre en forme et de mettre en page des documents HTML ou XML.

Le résultat

Compatibilité des navigateurs avec mask-position.

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

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

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

  15 Novembre 2012

  Document de travail.

  

  26 Août 2014

  Candidat à la recommandation.

  

  

Voir aussi, au sujet des techniques de masquage.

La propriété mask-position est décrite dans la spécification qui standardise tout ce qui concerne le masquage : CSS Masking Module, ou "Module CSS - Masquage" en français.
Les propriétés ci-dessous sont également présentées dans cette norme :

Propriétés :