-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

css

/* 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 des Rahmens angibt. Prozentsätze werden im Verhältnis zur vertikalen Dimension des gepolsterten Bereichs des Rahmens berechnet. Ein Wert von 0% bedeutet, dass die obere Kante des Bildes mit der oberen Polsterkante des Rahmens ausgerichtet ist, und ein Wert von 100% bedeutet, dass die untere Kante des Bildes mit der unteren Polsterkante des Rahmens 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

Vertikales Positionieren eines Maskenbildes

css

.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

Teil keiner Norm.

Browser-Kompatibilität

Siehe auch

-webkit-mask-position, -webkit-mask-position-x, -webkit-mask-origin