-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 Polsterrandkante der Box angibt. Prozentwerte werden basierend auf der vertikalen Dimension des Polsterbereichs der Box berechnet. Ein Wert von
0%bedeutet, dass die obere Kante des Bildes mit der oberen Polsterrandkante der Box ausgerichtet ist, und ein Wert von100%bedeutet, dass die untere Kante des Bildes mit der unteren Polsterrandkante 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 ]#
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
Gehört zu keinem Standard.
Browser-Kompatibilität
BCD tables only load in the browser