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