Please note, this is a STATIC archive of website developer.mozilla.org from 03 Nov 2016, cach3.com does not collect or store any user information, there is no "phishing" involved.

-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 initiale0%
Applicabilitétous les éléments
Héritéenon
Pourcentagesfait référence à la taille de la boîte elle-même
Médiavisuel
Valeur calculéepour length, la valeur absolue, sinon un pourcentage
Type d'animationdiscrète
Ordre canoniquel'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 ]#


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

Compatibilité des navigateurs

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 ?

Voir aussi

Étiquettes et contributeurs liés au document

 Contributeurs à cette page : SphinxKnight
 Dernière mise à jour par : SphinxKnight,