-webkit-mask-position-y

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-y legt die anf├Ąngliche vertikale Position eines Maskenbilds (Bild mit einer Maske) fest.

/* Keyword values */
-webkit-mask-position-y: top;
-webkit-mask-position-y: center;
-webkit-mask-position-y: bottom;

/* <percentage> values */
-webkit-mask-position-y: 100%;
-webkit-mask-position-y: -50%;

/* <length> values */
-webkit-mask-position-y: 50px;
-webkit-mask-position-y: -1cm;

/* Multiple values values */
-webkit-mask-position-y: 50px, 25%, -3em;

/* Global values */
-webkit-mask-position-y: inherit;
-webkit-mask-position-y: initial;
-webkit-mask-position-y: 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 oberen Seite des Bildes relativ zur oberen Kante der Box angibt. Die Prozents├Ątze werden anhand der vertikalen Abmessung des Box-Padding-Bereichs berechnet. Ein Wert von 0% bedeutet, dass der obere Rand des Bilds mit der oberen F├╝llkante der Box ausgerichtet ist und ein Wert von 100% bedeutet, dass die untere Kante des Bildes mit der unteren F├╝llkante der Box ausgerichtet ist.
top
Gleichwertig zu 0%.
bottom
Gleichwertig zu  100%.
center
Gleichwertig zu 50%.

Formale Syntax

[ <length-percentage> | top | center | bottom ]#

wobei
<length-percentage> = <length> | <percentage>

Beispiel

.exampleOne {
  -webkit-mask-image: url(mask.png);
  -webkit-mask-position-y: bottom;
}

.exampleTwo {
  -webkit-mask-image: url(mask.png);
  -webkit-mask-position-y: 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-x, -webkit-mask-origin, -webkit-mask-attachment