Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten. Erfahre mehr über dieses Experiment.
background-position-x
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-x CSS Eigenschaft legt die anfängliche horizontale Position für jedes Hintergrundbild fest. Die Position ist relativ zur Positionsschicht, die von background-origin gesetzt wird.
Probieren Sie es aus
background-position-x: left;
background-position-x: center;
background-position-x: 25%;
background-position-x: 2rem;
background-position-x: right 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%;
}
Der Wert dieser Eigenschaft wird durch jede Deklaration der Kurzschreibweiseigenschaften background oder background-position, die danach auf das Element angewendet werden, überschrieben.
Syntax
/* Keyword values */
background-position-x: left;
background-position-x: center;
background-position-x: right;
/* <percentage> values */
background-position-x: 25%;
/* <length> values */
background-position-x: 0px;
background-position-x: 1cm;
background-position-x: 8em;
/* Side-relative values */
background-position-x: right 3px;
background-position-x: left 25%;
/* Multiple values */
background-position-x: 0px, center;
/* Global values */
background-position-x: inherit;
background-position-x: initial;
background-position-x: revert;
background-position-x: revert-layer;
background-position-x: unset;
Die background-position-x Eigenschaft wird als ein oder mehrere Werte angegeben, die durch Kommata getrennt sind.
Werte
left-
Richtet den linken Rand des Hintergrundbildes am linken Rand der Hintergrundpositionsschicht aus.
center-
Richtet die Mitte des Hintergrundbildes an der Mitte der Hintergrundpositionsschicht aus.
right-
Richtet den rechten Rand des Hintergrundbildes am rechten Rand der Hintergrundpositionsschicht aus.
<length>-
Der Versatz der linken vertikalen Kante des gegebenen Hintergrundbildes von der linken vertikalen Kante der Hintergrundpositionsschicht. (Einige Browser erlauben die Zuordnung der rechten Kante für den Versatz).
<percentage>-
Der Versatz der horizontalen Position des gegebenen Hintergrundbildes relativ zum Container. Ein Wert von 0% bedeutet, dass der linke Rand des Hintergrundbildes mit dem linken Rand des Containers ausgerichtet ist, und ein Wert von 100% bedeutet, dass der rechte Rand des Hintergrundbildes mit dem rechten Rand des Containers ausgerichtet ist, daher zentriert ein Wert von 50% das Hintergrundbild horizontal.
Formale Definition
| Anfangswert | 0% |
|---|---|
| Anwendbar auf | alle Elemente. Auch anwendbar auf ::first-letter und ::first-line. |
| Vererbt | Nein |
| Prozentwerte | bezieht sich auf die Breite 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
background-position-x =
[ center | [ [ left | right | x-start | x-end ] ? <length-percentage>? ]! ] #
<length-percentage> =
<length> |
<percentage>
Beispiele
Einfaches Beispiel
Das folgende Beispiel zeigt die Implementierung eines Hintergrundbildes, bei dem background-position-x und background-position-y verwendet werden, um die horizontale und vertikale Position 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
Seiten-relative Werte
Das folgende Beispiel zeigt die Unterstützung für die seiten-relative Versatz-Syntax, die es dem Entwickler ermöglicht, den Hintergrund von jedem Rand 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 |
Browser-Kompatibilität
Loading...