Hintergrundposition - CSS-Tricks

Anonim

Mit der background-positionEigenschaft in CSS können Sie ein Hintergrundbild (oder einen Farbverlauf) innerhalb des Containers verschieben.

html ( background-position: 100px 5px; )

Es gibt drei verschiedene Arten von Werten:

  • Längenwerte (zB 100px 5px)
  • Die Prozentsätze (zB 100% 5%)
  • Schlüsselwörter (zB top right)

Die Standardwerte sind 0 0. Dadurch wird Ihr Hintergrundbild oben links im Container platziert.

Längenwerte sind ziemlich einfach: Der erste Wert ist die horizontale Position, der zweite Wert ist die vertikale Position. So 100px 5pxwird das Bild 100px nach rechts bewegen und fünf Pixel nach unten. Sie können in der Länge Werte eingestellt px, emoder eine der anderen CSS - Längenwerte.

Prozentsätze funktionieren etwas anders. Holen Sie Ihre Mathe-Hüte raus: Wenn Sie ein Hintergrundbild um X% verschieben, wird der X% -Punkt im Bild am X% -Punkt im Container ausgerichtet. Bedeutet beispielsweise, 50%dass die Bildmitte an der Mitte des Containers ausgerichtet wird. 100%bedeutet, dass das letzte Pixel des Bildes am letzten Pixel des Containers ausgerichtet wird und so weiter.

Schlüsselwörter sind nur Abkürzungen für Prozentsätze. Es ist einfacher, sich zu erinnern und zu schreiben top rightals 100% 0, und deshalb sind Schlüsselwörter eine Sache. Hier ist eine Liste aller fünf Schlüsselwörter und ihrer entsprechenden Werte:

  • top: 0% vertikal
  • right: 100% horizontal
  • bottom: 100% vertikal
  • left: 0% horizontal
  • center: 50% horizontal, wenn horizontal noch nicht definiert ist. Wenn dies der Fall ist, wird dies vertikal angewendet.

Es ist interessant festzustellen, dass es keine Rolle spielt, welche Reihenfolge Sie für die Schlüsselwörter verwenden: top centerist die gleiche wie center top. Sie können dies jedoch nur tun, wenn Sie ausschließlich Schlüsselwörter verwenden. center 10%ist nicht dasselbe wie 10% center.

Demo

Diese Demo zeigt Beispiele für background-positionSätze mit Längeneinheiten, Prozentsätzen und Schlüsselwörtern.

Siehe die Hintergrundpositionswerte des Stifts nach CSS-Tricks (@ css-Tricks) auf CodePen.

Werte deklarieren

background-positionIn modernen Browsern können Sie bis zu vier Werte angeben (Einzelheiten finden Sie in der Tabelle zur Browserunterstützung).

Wenn Sie einen Wert deklarieren , ist dieser Wert der horizontale Versatz. Der Browser setzt den vertikalen Versatz auf center.

Wenn Sie zwei Werte deklarieren , ist der erste Wert der horizontale Versatz und der zweite Wert der vertikale Versatz.

Wenn Sie drei oder vier Werte verwenden, wird es etwas schwieriger, aber Sie haben auch mehr Kontrolle über Ihre Hintergrundplatzierung.

Eine Syntax mit drei oder vier Werten wechselt zwischen Schlüsselwörtern und Längen- oder Prozenteinheiten. Sie können jeden der Schlüsselwortwerte außer centerin einer background-positionDeklaration mit drei oder vier Werten verwenden .

Wenn Sie drei Werte angeben , interpetiert der Browser den „fehlenden“ vierten Wert als 0. Hier ein Beispiel für einen Drei-Wert background-position:

#threevalues ( background-position: right 45px bottom; )

Dadurch wird das Hintergrundbild 45 Pixel von rechts und 0 Pixel vom Boden des Containers positioniert.

Hier ist ein Beispiel für einen Vierwert background-position :

#fourvalues ( background-position: right 45px bottom 20px; )

Dadurch wird das Hintergrundbild 45 Pixel von rechts und 20 Pixel vom Boden des Containers entfernt.

Beachten Sie die Reihenfolge der Werte in den obigen Beispielen: Schlüsselwörter gefolgt von Längeneinheiten. Ein Drei- oder Vierwert background-positionmuss diesem Format folgen, wobei ein Schlüsselwort vor einer Längen- oder Prozenteinheit steht.

Demo

Diese Demo enthält Beispiele für einen Wert, zwei Werte, drei Werte und vier Werte background-position.

Siehe die Syntax der Stifthintergrundpositionen 1, 2, 3 und 4 von CSS-Tricks (@ css-Tricks) auf CodePen.

verbunden

  • Hintergrund-Anhang
  • Hintergrund-Clip
  • Hintergrundfarbe
  • Hintergrundbild
  • Hintergrundherkunft
  • Hintergrund Wiederholung
  • Hintergrundgröße

Mehr Ressourcen

  • background-position in der CSS3-Spezifikation
  • background-position bei MDN
  • Versetzte Hintergrundbilder

Browser-Unterstützung

Die Grundwerte werden überall unterstützt. Die vierwertige Syntax unterstützt Folgendes:

Diese Browser-Unterstützungsdaten stammen von Caniuse, das detaillierter ist. Eine Zahl gibt an, dass der Browser die Funktion ab dieser Version unterstützt.

Desktop

Chrom Feuerfuchs IE Kante Safari
25 13 9 12 7

Handy / Tablet

Android Chrome Android Firefox Android iOS Safari
88 85 4.4 7.0-7.1

Das ist das gleiche Maß an Unterstützung wie die background-position-xund background-position-yEigenschaften.