-webkit-mask-position-x

Kein Standard
Diese Funktion entspricht nicht dem Standard und ist nicht Teil der Standardisierung. Diese Funktion darf nicht in Webseiten, die via das Internet zugänglich sind, benutzt werden: Sie wird nicht für alle Nutzer funktionieren. Es kann zu umfangreichen Inkompatibilitäten zwischen verschiedenen Implementierungen kommen und die Funktionsweise oder Eigenschaften könnten in der Zukunft verändert werden.

Die CSS-Eigenschaft -webkit-mask-position-x legt die anfängliche horizontale Position eines Maskenbilds (Bild mit einer Maske) fest.

/* 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 values */
-webkit-mask-position-x: 50px, 25%, -3em;

/* Global values */
-webkit-mask-position-x: inherit;
-webkit-mask-position-x: initial;
-webkit-mask-position-x: unset;

Initialwert	`0%`
Anwendbar auf	alle Elemente
Vererbt	Nein
Prozentwerte	beziehen sich auf die Größe der Box selbst
Medien	visuell
Berechneter Wert	für `length` der absolute Wert, ansonsten ein Prozentwert
Animationstyp	diskret
Kanonische Reihenfolge	Reihenfolge des Auftretens in der formalen Grammatik der Werte

Syntax

Werte

<length-percentage>: Eine Länge, die die Position der linken Kante des Bildes relativ zur linken Füllkante der Box angibt. Die Prozentsätze werden anhand der horizontalen Abmessung des Box-Padding-Bereichs berechnet. Das heißt, ein Wert von 0% bedeutet, dass die linke Kante des Bildes mit der linken Füllkante der Box ausgerichtet ist und ein Wert von 100% bedeutet, dass die rechte Kante des Bildes mit der rechten Füllkante der Box ausgerichtet ist.
left: Gleichwertig mit 0%.
center: Gleichwertig mit 50%.
right: Gleichwertig mit 100%.

Formale Syntax

[ <length-percentage> | left | center | right ]#wobei 
<length-percentage> = <length> | <percentage>

Beispiel

.exampleOne {
  -webkit-mask-image: url(mask.png);
  -webkit-mask-position-x: right;
}

.exampleTwo {
  -webkit-mask-image: url(mask.png);
  -webkit-mask-position-x: 25%;
}

Spezifikation

Kein Teil einer Spezifikation.

Browser-Kompatibilität

Wir konvertieren die Kompatibilitätsdaten in ein maschinenlesbares JSON Format. Diese Kompatibilitätstabelle liegt noch im alten Format vor, denn die darin enthaltenen Daten wurden noch nicht konvertiert. Finde heraus wie du helfen kannst!

Desktop
Mobile

Feature	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari (WebKit)
Basic support	1.0	Nicht unterstützt	Nicht unterstützt	Nicht unterstützt	4.0

Feature	Android	Firefox Mobile (Gecko)	IE Phone	Opera Mobile	Safari Mobile
Basic support	?	Nicht unterstützt	Nicht unterstützt	Nicht unterstützt	?

Sehenswert

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