-webkit-mask-position-y

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-y permet de définir la position verticale 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-y: top;
-webkit-mask-position-y: center;
-webkit-mask-position-y: bottom;

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

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

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

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

Valeurs

<length-percentage>: Une longueur indiquant la position du haut de l'image à partir du bord haut de la boîte de remplissage (padding). Les pourcentages sont calculés relativement à la dimension verticale de la boîte de remplissage (0% indique que le bord haut de l'image est aligné avec le bord haut de la boîte de remplissage et 100% indique que le bord bas de l'image est aligné avec le bord bas de la boîte de remplissage).
<length>: Une longueur, mesurée à partir du bord haut de la boîte de remplissage (padding), qui indique la position verticale de l'image.
top: Un mot-clé équivalent à 0%.
bottom: Un mot-clé équivalent à 100%.
center: Un mot-clé équivalent à 50%.

Syntaxe formelle

[ <length-percentage> | top  | center | bottom ]#où 
<length-percentage> = <length> | <percentage>

Exemples

.exempleUn {
  -webkit-mask-image: url(mask.png);
  -webkit-mask-position-y: bottom;
}

.exempleDeux {
  -webkit-mask-image: url(mask.png);
  -webkit-mask-position-y: 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	?