-webkit-mask-position-y
Nicht standardisiert: Diese Funktion ist nicht standardisiert. Wir raten davon ab, nicht-standardisierte Funktionen auf produktiven Webseiten zu verwenden, da sie nur von bestimmten Browsern unterstützt werden und sich in Zukunft ändern oder entfernt werden können. Unter Umst��nden kann sie jedoch eine geeignete Option sein, wenn es keine standardisierte Alternative gibt.
Die CSS-Eigenschaft -webkit-mask-position-y legt die anfängliche vertikale Position eines Maskenbildes fest.
Syntax
/* 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 */
-webkit-mask-position-y:
50px,
25%,
-3em;
/* Global values */
-webkit-mask-position-y: inherit;
-webkit-mask-position-y: initial;
-webkit-mask-position-y: revert;
-webkit-mask-position-y: revert-layer;
-webkit-mask-position-y: unset;
Werte
<length-percentage>-
Eine Länge, die die Position der oberen Seite des Bildes relativ zur oberen Polsterkante der Box angibt. Prozentsätze werden relativ zur vertikalen Dimension des Box-Polsterbereichs berechnet. Ein Wert von
0%bedeutet, dass die obere Kante des Bildes mit der oberen Polsterkante der Box ausgerichtet ist, und ein Wert von100%bedeutet, dass die untere Kante des Bildes mit der unteren Polsterkante der Box ausgerichtet ist. top-
Entspricht
0%. bottom-
Entspricht
100%. center-
Entspricht
50%.
Formale Definition
| Anfangswert | 0% |
|---|---|
| Anwendbar auf | alle Elemente |
| Vererbt | Nein |
| Prozentwerte | beziehen sich auf die Größe der Box selbst |
| Berechneter Wert | für <length> der absolute Wert, ansonsten ein Prozentwert |
| Animationstyp | diskret |
Formale Syntax
-webkit-mask-position-y =
[ <length-percentage> | top | center | bottom ]#
<length-percentage> =
<length> |
<percentage>
Beispiele
Vertikale Positionierung eines Maskenbildes
.exampleOne {
-webkit-mask-image: url("mask.png");
-webkit-mask-position-y: bottom;
}
.exampleTwo {
-webkit-mask-image: url("mask.png");
-webkit-mask-position-y: 25%;
}
Spezifikationen
Nicht Teil eines Standards.
Browser-Kompatibilität
Siehe auch
-webkit-mask-position, -webkit-mask-position-x, -webkit-mask-origin