CSS-Anfänger-Tutorial: Hintergrundbild füllt den gesamten Bildschirm

Wenn Sie möchten, dass die gesamte Benutzeroberfläche ein Hintergrundbild hat, denken Sie natürlich daran, dem Hauptteil einen Hintergrund hinzuzufügen. Der Code lautet wie folgt:

Körper {
     Breite: 100 %;
     Höhe: 100%;
    /* Hintergrundbild laden */
    Hintergrund: URL("../static/images/index/backImg.jpg") keine Wiederholung;
    /* Das Hintergrundbild wird vertikal und horizontal zentriert*/
    Hintergrundposition: Mitte Mitte;
    /* Wenn die Inhaltshöhe größer als die Bildhöhe ist, wird das Hintergrundbild relativ zum Ansichtsfenster fixiert*/
    Hintergrundanhang: behoben;
    /* Hintergrundbild entsprechend der Containergröße skalieren*/
    Hintergrundgröße: Abdeckung;
    /* Stellen Sie die Hintergrundfarbe ein. Die Hintergrundfarbe wird während des Ladevorgangs des Hintergrundbilds angezeigt*/
  Hintergrundfarbe: rgba(41, 50, 39, 1);
}

Es wird festgestellt, dass die Höhe des Textkörpers 0 beträgt und das Bild daher nicht angezeigt werden kann. Die Lösung besteht darin, die Breite und Höhe des HTML auf 100 % zu setzen, sodass der Textkörper einen Wert hat und das Hintergrundbild den gesamten Bildschirm ausfüllt.

Erweiterungen

url(images/beijing.png) – der Speicherort des Bildpfads;

keine Wiederholung – das Bild wird nicht wiederholt;

Mitte 0px – die Mitte befindet sich auf der linken Seite der Seite, 0px befindet sich von der oberen Seite der Seite aus;

Hintergrundposition: Mitte 0 – ist die Positionierung des Bildes, wie oben;

background-size: cover; — Erweitert das Hintergrundbild so, dass es den Hintergrundbereich vollständig abdeckt. Einige Teile des Hintergrundbildes werden möglicherweise nicht im Hintergrundpositionierungsbereich angezeigt.

min-height: 100vh;——Die Höhe des Fensters. „Viewport“ bezieht sich auf die Größe des sichtbaren Bereichs im Browser, d. h. window.innerWidth/window.innerHeight.

Zusammenfassen

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, dass der Inhalt dieses Artikels einen gewissen Lernwert für Ihr Studium oder Ihre Arbeit hat. Vielen Dank für Ihre Unterstützung von 123WORDPRESS.COM.