-webkit-mask-position-y
Non standard: Cette fonctionnalité n'est pas standardisée. Nous déconseillons d'utiliser des fonctionnalités non standard en production, car leur prise en charge par les navigateurs est limitée, et elles peuvent être modifiées ou supprimées. Toutefois, elles peuvent constituer une alternative appropriée dans certains cas où aucune option standard n'existe.
La propriété -webkit-mask-position-y permet de définir la position verticale initiale d'une image de masque.
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: revert;
-webkit-mask-position-y: revert-layer;
-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 et100%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%.
Définition formelle
| 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 |
| Valeur calculée | pour <length>, la valeur absolue, sinon un pourcentage |
| Type d'animation | discrète |
Syntaxe formelle
-webkit-mask-position-y =
[ <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é ne fait partie d'aucun standard.
Compatibilité des navigateurs
Loading…