Cette page a été traduite à partir de l'anglais par la communauté. Vous pouvez contribuer en rejoignant la communauté francophone sur MDN Web Docs.
-webkit-mask-position-x
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-x permet de définir la position horizontale initiale d'une image de masque.
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: revert;
-webkit-mask-position-x: revert-layer;
-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 et100%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%.
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-x =
[ <length-percentage> | left | center | right ] #
<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é ne fait partie d'aucun standard.
Compatibilité des navigateurs
Chargement...