-webkit-mask-position-x CSS property
Nicht standardisiert: Diese Funktion ist nicht standardisiert. Wir raten davon ab, nicht-standardisierte Funktionen auf produktiven Webseiten zu verwenden, da sie nur von bestimmten Browsern unterstützt werden und sich in Zukunft ändern oder entfernt werden können. Unter Umständen kann sie jedoch eine geeignete Option sein, wenn es keine standardisierte Alternative gibt.
Die CSS-Eigenschaft -webkit-mask-position-x legt die anfängliche horizontale Position eines Maskenbildes fest.
Syntax
/* Keyword values */
-webkit-mask-position-x: left;
-webkit-mask-position-x: center;
-webkit-mask-position-x: right;
/* <percentage> values */
-webkit-mask-position-x: 100%;
-webkit-mask-position-x: -50%;
/* <length> values */
-webkit-mask-position-x: 50px;
-webkit-mask-position-x: -1cm;
/* Multiple values */
-webkit-mask-position-x:
50px,
25%,
-3em;
/* Global values */
-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;
Werte
<length-percentage>-
Eine Länge, die die Position des linken Randes des Bildes relativ zum linken Rand des Box-Inhalts angibt. Prozentsätze werden in Bezug auf die horizontale Dimension der Box-Inhaltfläche berechnet. Das bedeutet, ein Wert von
0%bedeutet, dass der linke Rand des Bildes mit dem linken Rand der Box-Inhaltfläche ausgerichtet ist, und ein Wert von100%bedeutet, dass der rechte Rand des Bildes mit dem rechten Rand der Box-Inhaltfläche ausgerichtet ist. left-
Entspricht
0%. center-
Entspricht
50%. right-
Entspricht
100%.
Formale Definition
| Anfangswert | 0% |
|---|---|
| Anwendbar auf | alle Elemente |
| Vererbt | Nein |
| Prozentwerte | beziehen sich auf die Größe der Box selbst |
| Berechneter Wert | für <length> der absolute Wert, ansonsten ein Prozentwert |
| Animationstyp | diskret |
Formale Syntax
-webkit-mask-position-x =
[ <length-percentage> | left | center | right ]#
<length-percentage> =
<length> |
<percentage>
Beispiele
Horizontales Positionieren eines Maskenbildes
.exampleOne {
-webkit-mask-image: url("mask.png");
-webkit-mask-position-x: right;
}
.exampleTwo {
-webkit-mask-image: url("mask.png");
-webkit-mask-position-x: 25%;
}
Spezifikationen
Gehört zu keinem Standard.