-webkit-mask-position-x

Nicht standardisiert: Diese Funktion ist nicht standardisiert und befindet sich nicht auf dem Weg zur Standardisierung. Verwenden Sie sie nicht auf Produktionsseiten, die dem Web ausgesetzt sind: Sie funktioniert nicht für alle Benutzer. Es kann auch große Inkompatibilitäten zwischen Implementierungen geben, und das Verhalten kann sich in Zukunft ändern.

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 des linken Randes des Bildes relativ zum linken Rand der Box-Padding-Kante angibt. Prozentwerte werden relativ zur horizontalen Dimension der Box-Padding-Fläche berechnet. Das bedeutet, ein Wert von 0% bedeutet, dass der linke Rand des Bildes mit dem linken Rand der Box-Padding-Kante ausgerichtet ist, und ein Wert von 100% bedeutet, dass der rechte Rand des Bildes mit dem rechten Rand der Box-Padding-Kante 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 ]#

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

BCD tables only load in the browser

Siehe auch

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