-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 legt die anfängliche horizontale Position eines Maskenbildes fest.

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 Polsterungskante der Box angibt. Prozentsätze werden in Bezug auf die horizontale Dimension des Box-Polsterungsbereichs berechnet. Das bedeutet, dass ein Wert von 0% bedeutet, dass die linke Kante des Bildes mit der linken Polsterungskante der Box ausgerichtet ist, und ein Wert von 100% bedeutet, dass die rechte Kante des Bildes mit der rechten Polsterungskante der Box 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

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

-webkit-mask-position, -webkit-mask-position-y, -webkit-mask-origin