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

Schlagwörter des Dokuments und Mitwirkende

Mitwirkende an dieser Seite: teoli, felixhaeberle
Zuletzt aktualisiert von: teoli,