-webkit-mask-position-x

Non standard
Cette fonctionnalité n'est ni standard, ni en voie de standardisation. Ne l'utilisez pas pour des sites accessibles sur le Web : elle ne fonctionnera pas pour tout utilisateur. Il peut également y avoir d'importantes incompatibilités entre les implémentations et son comportement peut être modifié dans le futur.

La propriété -webkit-mask-position-x permet de définir la position horizontale initiale d'une image de masque.

Valeur initiale	`0%`
Applicabilité	tous les éléments
Héritée	non
Pourcentages	fait référence à la taille de la boîte elle-même
Média	visuel
Valeur calculée	pour `length`, la valeur absolue, sinon un pourcentage
Type d'animation	discrète
Ordre canonique	l'ordre d'apparition dans la grammaire formelle des valeurs

Syntaxe

/* Valeurs avec un mot-clé */
-webkit-mask-position-x: left;
-webkit-mask-position-x: center;
-webkit-mask-position-x: right;

/* Valeurs proportionnelles */ 
/* Type <percentage>        */
-webkit-mask-position-x: 100%;
-webkit-mask-position-x: -50%;

/* Valeurs de longueur */
/* Type <length>       */
-webkit-mask-position-x: 50px;
-webkit-mask-position-x: -1cm;

/* Gestion de plusieurs valeurs */
-webkit-mask-position-x: 50px, 25%, -3em;

/* Valeurs globales */
-webkit-mask-position-x: inherit;
-webkit-mask-position-x: initial;
-webkit-mask-position-x: unset;

Valeurs

<length-percentage>: Une longueur indiquant la position du bord gauche de l'image à partir du bord gauche de la boîte de remplissage (padding). Les pourcentages sont calculés relativement à la dimension horizontale de la boîte de remplissage. (0% indique que le bord gauche de l'image est aligné avec le bord gauche de la boîte de remplissage et 100% indique que le bord droit de l'image est aligné avec le bord droit de la boîte de remplissage).
left: Un mot-clé équivalent à 0%.
right: Un mot-clé équivalent à 100%.
center: Un mot-clé équivalent à 50%.

Syntaxe formelle

[ <length-percentage> | left | center | right ]#où 
<length-percentage> = <length> | <percentage>

Exemples

.exempleUn {
  -webkit-mask-image: url(mask.png);
  -webkit-mask-position-x: right;
}

.exempleDeux {
  -webkit-mask-image: url(mask.png);
  -webkit-mask-position-x: 25%;
}

Spécifications

Cette propriété est une propriété propriétaire liée à WebKit/Blink et ne fait partie d'aucune spécification.

Fonctionnalité	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari (WebKit)
Support simple	1.0	Pas de support	Pas de support	Pas de support	4.0

Fonctionnalité	Android	Firefox Mobile (Gecko)	IE Phone	Opera Mobile	Safari Mobile
Support simple	?	Pas de support	Pas de support	Pas de support	?