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 setzt die anfängliche horizontale Position für jedes Hintergrundbild. Die Position ist relativ zur Positionsebene, die durch background-origin festgelegt wird.

Der Wert dieser Eigenschaft wird durch jede Deklaration der abkürzenden Eigenschaften background oder background-position, die nachträglich auf das Element angewendet werden, überschrieben.

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%; }

Syntax

css

/* 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 Eigenschaft background-position-x wird als ein oder mehrere Werte angegeben, die durch Kommata getrennt sind.

Werte

left: Richtet den linken Rand des Hintergrundbildes am linken Rand der Hintergrundpositionsebene aus.
center: Richtet das Zentrum des Hintergrundbildes am Zentrum der Hintergrundpositionsebene aus.
right: Richtet den rechten Rand des Hintergrundbildes am rechten Rand der Hintergrundpositionsebene aus.
<length>: Der Versatz der linken vertikalen Kante des angegebenen Hintergrundbildes von der linken vertikalen Kante der Hintergrundpositionsebene. (Einige Browser erlauben die Zuweisung der rechten Kante für den Versatz).
<percentage>: Der Versatz der horizontalen Position des angegebenen 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, sodass ein Wert von 50% das Hintergrundbild horizontal zentriert.

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 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

html

<div></div>

CSS

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 Versatzsyntax, die es dem Entwickler erlaubt, den Hintergrund von jedem Rand aus zu versetzen.

HTML

html

<div></div>

CSS

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

Siehe auch

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.

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