-webkit-mask-position-x

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 setzt die initiale horizontale Position eines Maskenbildes.

Syntax

css
/* 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 der linken Kante des Bildes relativ zur linken Randeinlage des Box anzeigt. Prozentsätze werden im Verhältnis zur horizontalen Dimension des Box-Randbereichs berechnet. Das bedeutet, ein Wert von 0% bedeutet, dass die linke Kante des Bildes an der linken Randeinlage des Box ausgerichtet ist, und ein Wert von 100% bedeutet, dass die rechte Kante des Bildes an der rechten Randeinlage des Box ausgerichtet ist.

left

Entspricht 0%.

center

Entspricht 50%.

Entspricht 100%.

Formale Definition

Anfangswert0%
Anwendbar aufalle Elemente
VererbtNein
Prozentwertebeziehen sich auf die Größe der Box selbst
Berechneter Wertfür <length> der absolute Wert, ansonsten ein Prozentwert
Animationstypdiskret

Formale Syntax

-webkit-mask-position-x = 
[ <length-percentage> | left | center | right ]#

<length-percentage> =
<length> |
<percentage>

Beispiele

Horizontale Positionierung eines Maskenbildes

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

Nicht Teil eines Standards.

Browser-Kompatibilität

Siehe auch