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

Initialwert0%
Anwendbar aufalle Elemente
VererbtNein
Prozentwertebeziehen sich auf die Größe der Box selbst
Medienvisuell
Berechneter Wertfür length der absolute Wert, ansonsten ein Prozentwert
Animationstypdiskret
Kanonische ReihenfolgeReihenfolge 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!

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

Verwandte Themen