background-position-y
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
Die background-position-y
CSS Eigenschaft legt die anfängliche vertikale Position für jedes Hintergrundbild fest. Die Position bezieht sich auf die Positionsebene, die durch background-origin
festgelegt wird.
Probieren Sie es aus
Der Wert dieser Eigenschaft wird durch jede Deklaration der background
oder background-position
Kurzschreibweise, die dem Element danach zugewiesen wird, überschrieben.
Syntax
/* Keyword values */
background-position-y: top;
background-position-y: center;
background-position-y: bottom;
/* <percentage> values */
background-position-y: 25%;
/* <length> values */
background-position-y: 0px;
background-position-y: 1cm;
background-position-y: 8em;
/* Side-relative values */
background-position-y: bottom 3px;
background-position-y: bottom 10%;
/* Multiple values */
background-position-y: 0px, center;
/* Global values */
background-position-y: inherit;
background-position-y: initial;
background-position-y: revert;
background-position-y: revert-layer;
background-position-y: unset;
Die background-position-y
Eigenschaft wird als ein oder mehrere Werte angegeben, die durch Kommas getrennt sind.
Werte
top
-
Richtet die obere Kante des Hintergrundbildes mit der oberen Kante der Hintergrundpositionsebene aus.
center
-
Richtet die vertikale Mitte des Hintergrundbildes mit der vertikalen Mitte der Hintergrundpositionsebene aus.
bottom
-
Richtet die untere Kante des Hintergrundbildes mit der unteren Kante der Hintergrundpositionsebene aus.
<length>
-
Der Versatz der angegebenen horizontalen Kante des Hintergrundbildes von der entsprechenden oberen horizontalen Kante der Hintergrundpositionsebene. (Einige Browser erlauben die Zuweisung der unteren Kante für den Versatz).
<percentage>
-
Der Versatz der vertikalen Position des angegebenen Hintergrundbildes relativ zum Container. Ein Wert von 0% bedeutet, dass die obere Kante des Hintergrundbildes mit der oberen Kante des Containers ausgerichtet ist, und ein Wert von 100% bedeutet, dass die untere Kante des Hintergrundbildes mit der unteren Kante des Containers ausgerichtet ist, so dass ein Wert von 50% das Hintergrundbild vertikal zentriert.
Formale Definition
Anfangswert | 0% |
---|---|
Anwendbar auf | alle Elemente. Auch anwendbar auf ::first-letter und ::first-line . |
Vererbt | Nein |
Prozentwerte | bezieht sich auf die Höhe des Hintergrundpositionsbereichs abzüglich der Höhe des Hintergrundbilds |
Berechneter Wert | Eine Liste, bei der jeder Eintrag aus einem Versatz besteht, der durch eine Kombination aus absoluter Länge und einem Prozentsatz plus einem Ursprungsschlüsselwort definiert wird |
Animationstyp | a repeatable list |
Formale Syntax
Beispiele
Einfaches Beispiel
Das folgende Beispiel zeigt eine einfache Implementierung eines Hintergrundbildes, bei der background-position-x
und background-position-y
verwendet werden, um die horizontalen und vertikalen Positionen des Bildes separat zu definieren.
HTML
<div></div>
CSS
div {
width: 300px;
height: 300px;
background-color: skyblue;
background-image: url(https://mdn.dev/archives/media/attachments/2020/07/29/17350/3b4892b7e820122ac6dd7678891d4507/firefox.png);
background-repeat: no-repeat;
background-position-x: center;
background-position-y: bottom;
}
Ergebnis
Seitrelationale Werte
Das folgende Beispiel zeigt die Unterstützung der seitrelationale Versatzsyntax, die es dem Entwickler ermöglicht, den Hintergrund von jeder Kante aus zu versetzen.
HTML
<div></div>
CSS
div {
width: 300px;
height: 300px;
background-color: seagreen;
background-image: url(https://mdn.dev/archives/media/attachments/2020/07/29/17350/3b4892b7e820122ac6dd7678891d4507/firefox.png);
background-repeat: no-repeat;
background-position-x: right 20px;
background-position-y: bottom 10px;
}
Ergebnis
Spezifikationen
Specification |
---|
CSS Backgrounds and Borders Module Level 4 # background-position-longhands |
Browser-Kompatibilität
BCD tables only load in the browser