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 September 2016.
* Some parts of this feature may have varying levels of support.
Die background-position-y CSS Eigenschaft legt die anfängliche vertikale Position für jedes Hintergrundbild fest. Die Position ist relativ zur Positionsebene, die durch background-origin festgelegt wird.
Der Wert dieser Eigenschaft wird durch jede Deklaration der Kurzformen background oder background-position, die auf das Element danach angewendet werden, überschrieben.
Probieren Sie es aus
background-position-y: top; background-position-y: center; background-position-y: 25%; background-position-y: 2rem; background-position-y: bottom 32px; <section class="display-block" id="default-example"> <div class="transition-all" id="example-element"></div> </section> #example-element { background-color: navajowhite; background-image: url("/shared-assets/images/examples/star.png"); background-repeat: no-repeat; height: 100%; } 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 an der oberen Kante der Hintergrundpositionsebene aus.
center-
Richtet das vertikale Zentrum des Hintergrundbildes am vertikalen Zentrum der Hintergrundpositionsebene aus.
bottom-
Richtet die untere Kante des Hintergrundbildes an der unteren Kante der Hintergrundpositionsebene aus.
<length>-
Der Versatz der horizontalen Kante des angegebenen Hintergrundbildes von der oberen horizontalen Kante der entsprechenden Hintergrundpositionsebene. (Einige Browser erlauben das Festlegen des unteren Randes 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.
Formelle 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 |
Formelle Syntax
background-position-y =
[ center | [ [ top | bottom | y-start | y-end ]? <length-percentage>? ]! ]#
<length-percentage> =
<length> |
<percentage>
Beispiele
Einfaches Beispiel
Das folgende Beispiel zeigt eine 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
Seitenrelative Werte
Das folgende Beispiel zeigt die Unterstützung der seitenrelativen Offset-Syntax, die es dem Entwickler ermöglicht, das Hintergrundbild 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 Module Level 4 # background-position-longhands |