Wie passt man mit CSS ein Hintergrundbild perfekt an ein Div an?

Hintergrundbild an ein Div anpassen

Beim Platzieren eines Hintergrundbilds innerhalb eines Divs treten häufig Probleme auf, wenn das Bild ausgeschnitten wird ab oder passt nicht richtig. Um dieses Problem zu lösen, bietet CSS die Eigenschaft „Hintergrundgröße“ an, die eine präzise Steuerung der Skalierung und Positionierung des Hintergrundbilds ermöglicht.

Skalieren des Hintergrundbilds so, dass es in das Div passt

Um sicherzustellen, dass das Hintergrundbild innerhalb der Grenzen des Divs ohne Zuschneiden angezeigt wird, legen Sie die Eigenschaft „Hintergrundgröße“ auf fest enthalten:

background-size: contain;

Skalieren des Hintergrundbilds, um das gesamte Div abzudecken

Um das Hintergrundbild alternativ dazu zu bringen, das gesamte Div einzunehmen, skalieren Sie es mit cover:

background-size: cover;

Visuelle Demonstration

Bedenken Sie das Folgen Sie dem HTML-Code mit einem Div, das ein Hintergrundbild enthält:

<div>

Um zu verhindern, dass das Bild abgeschnitten wird, wenden Sie die Eigenschaft „Hintergrundgröße“ an:

#mainpage {
  background-size: contain;
}

Alternativ können Sie das Bild erstellen Das Bild deckt die gesamte Div ab:

#mainpage {
  background-size: cover;
}

Das obige ist der detaillierte Inhalt vonWie passt man mit CSS ein Hintergrundbild perfekt an ein Div an?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!