-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
Berechneter Wertf├╝r length der absolute Wert, ansonsten ein Prozentwert
Animationstypdiskret

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! (en-US)

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 (en-US), -webkit-mask-position-y, -webkit-mask-origin, -webkit-mask-attachment (en-US)