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

css

.exampleOne {
  -webkit-mask-image: url("https://developer.mozilla.org/mask.png");
  -webkit-mask-position-y: bottom;
}

.exampleTwo {
  -webkit-mask-image: url("https://developer.mozilla.org/mask.png");
  -webkit-mask-position-y: 25%;
}

Spezifikationen

Teil keiner Spezifikation.

Browser-Kompatibilität

Siehe auch

Help improve MDN

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden

-webkit-mask-position-y CSS property

Help improve MDN

`-webkit-mask-position-y` CSS property