-webkit-mask-position-y CSS property
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 Maskenbilds 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
Diese Eigenschaft wird als ein oder mehrere durch Kommas getrennte Werte angegeben:
<length-percentage>-
Eine Länge, die die Position der oberen Seite des Bilds relativ zur oberen Padding-Kante der Box angibt. Prozentwerte werden relativ zur vertikalen Dimension des Padding-Bereichs der Box berechnet. Ein Wert von
0%bedeutet, dass die obere Kante des Bilds an der oberen Padding-Kante der Box ausgerichtet ist, und ein Wert von100%bedeutet, dass die untere Kante des Bilds an der unteren Padding-Kante 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 Maskenbilds
.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.