CSS, um einen Hintergrundbild-Vollbildeffekt zu erzielen

Wenn Sie möchten, dass die gesamte Benutzeroberfläche ein Hintergrundbild hat, ist es die natürliche Idee, dem Körper einen Hintergrund hinzuzufügen. Der Code lautet wie folgt:

body {
     width：100%；
     height: 100%;
    /* 加载背景图 */
    background: url("../static/images/index/backImg.jpg") no-repeat;
    /* 背景图垂直、水平均居中 */
    background-position: center center;
    /* 当内容高度大于图片高度时，背景图像的位置相对于viewport固定 */
    background-attachment: fixed;
    /* 让背景图基于容器大小伸缩 */
    background-size: cover;
    /* 设置背景颜色，背景图加载过程中会显示背景色 */
　　background-color: rgba(41, 50, 39, 1);
}

Gefunden dass die Höhe des Körpers 0 ist, also das Bild Es kann nicht angezeigt werden; die Lösung besteht darin, die Breite und Höhe des HTML auf 100 % zu setzen, damit der Körper einen Wert hat und das Hintergrundbild den gesamten Bildschirm vollständig ausfüllt.

(Empfohlenes Tutorial: CSS-Tutorial)

Erweiterte Kenntnisse:

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

keine Wiederholung – das Bild wird nicht wiederholt;

Mitte 0px – Mitte ist die Positionierung von der linken Seite der Seite, 0px ist die Positionierung von oben auf der Seite; >

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

Hintergrundgröße: Abdeckung – Erweitern Sie das Hintergrundbild auf eine ausreichend große Größe, damit das Hintergrundbild deckt den Hintergrundbereich vollständig ab. Einige Teile des Hintergrundbilds werden möglicherweise nicht im Hintergrundpositionierungsbereich angezeigt.

min-height: 100vh – die Höhe des Fensters. Das ist die Größe von window.innerWidth/window.innerHeight.

Empfohlene verwandte Video-Tutorials:

CSS-Video-Tutorial

Das obige ist der detaillierte Inhalt vonCSS, um einen Hintergrundbild-Vollbildeffekt zu erzielen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!