Wie erstelle ich ein responsives Vollbild-Hintergrundbild in CSS?

Erstellen eines responsiven Vollbild-Hintergrundbilds mit CSS

Bei Ihrer Suche, ein Bild als Vollbild-Hintergrund für Ihre Webseite festzulegen, sind Sie auf ein Problem gestoßen: das Bild deckt die Seite nicht vollständig ab und wiederholt sich ganz rechts. So können Sie dieses Problem mithilfe von CSS-Techniken lösen:

Lösung 1: Cover-Methode

Mit der Eigenschaft „background-size“ kann die Größe des Hintergrundbilds gesteuert werden. In diesem Fall stellt die Verwendung des Wertes „Cover“ sicher, dass das Bild die gesamte Seite abdeckt, auch wenn das Bild dadurch gestreckt oder zugeschnitten werden muss, damit es passt:

background-size: cover;

Um sicherzustellen, dass das Bild sowohl horizontal als auch vertikal zentriert ist, Sie können die Eigenschaft „Hintergrundposition“ mit dem Wert 50 % 50 % verwenden:

background-position: 50% 50%;

Lösung 2: Feste Anlage

An Um zu verhindern, dass das Hintergrundbild mit dem Seiteninhalt scrollt, können Sie die Eigenschaft „background-attachment“ auf „Fixed“ setzen. Dadurch wird das Bild fixiert, sodass die Seite dahinter scrollen kann:

background-attachment: fixed;

Kurzschriftsyntax

Sie können eine Kurzschriftversion beider Lösungen mit der folgenden Syntax schreiben:

background: url(image.jpg) fixed 50% / cover;

wobei das / die Eigenschaften „Hintergrundposition“ und „Hintergrundgröße“ trennt.

Safari Kompatibilität

Beachten Sie, dass Safari einen Fehler in der oben beschriebenen Kurzschriftsyntax aufweist. Um es in Safari zu verwenden, sollten Sie die Eigenschaften wie folgt trennen:

background-image: url(image.jpg);
background-attachment: fixed;
background-position: 50% 50%;
background-size: cover;

Durch die Implementierung dieser Techniken deckt Ihr Hintergrundbild nun die Seite vollständig ab und bleibt zentriert, wodurch ein optisch ansprechender und ansprechender Hintergrund für Sie bereitgestellt wird Website.

Das obige ist der detaillierte Inhalt vonWie erstelle ich ein responsives Vollbild-Hintergrundbild in CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!