-webkit-mask-position-y
Nicht standardisiert: Diese Funktion ist nicht standardisiert und befindet sich nicht auf dem Weg zur Standardisierung. Verwenden Sie sie nicht auf Produktionsseiten, die dem Web ausgesetzt sind: Sie funktioniert nicht für alle Benutzer. Es kann auch große Inkompatibilitäten zwischen Implementierungen geben, und das Verhalten kann sich in Zukunft ändern.
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 Kante des Box-Paddings angibt. Prozentsätze werden relativ zur vertikalen Dimension des Box-Padding-Bereichs berechnet. Ein Wert von
0%bedeutet, dass die obere Kante des Bildes mit der oberen Kante des Box-Paddings ausgerichtet ist, und ein Wert von100%bedeutet, dass die untere Kante des Bildes mit der unteren Kante des Box-Paddings 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 ]#
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
BCD tables only load in the browser