CSS pour obtenir un effet plein écran de l'image d'arrière-plan

Si vous souhaitez que toute l'interface ait une image de fond, l'idée naturelle est d'ajouter un fond au corps. Le code est le suivant :

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);
}

Trouvé. que la hauteur du corps est de 0, donc l'image ne peut pas être affichée ; la solution est de définir la largeur et la hauteur du HTML à 100 %, afin que le corps ait de la valeur et que l'image d'arrière-plan remplisse complètement tout l'écran.

(Tutoriel recommandé : Tutoriel CSS)

Connaissances approfondies :

url(images/beijing.png) - l'emplacement du chemin de l'image ;

no-repeat - l'image ne se répète pas ;

center 0px - le centre est le positionnement depuis le côté gauche de la page, 0px est le positionnement depuis le haut de la page

background-position: center 0 - est le positionnement de l'image, le même que ci-dessus

background-size: cover; - étend l'image d'arrière-plan à une taille suffisamment grande pour que l'image d'arrière-plan soit couvre complètement la zone d’arrière-plan. Certaines parties de l'image d'arrière-plan peuvent ne pas être affichées dans la zone de positionnement de l'arrière-plan ;

min-height : 100vh ; - la hauteur de la fenêtre, "viewport" fait référence à la taille de la zone visible à l'intérieur du navigateur, c'est la taille window.innerWidth/window.innerHeight.

Tutoriels vidéo associés recommandés :

Tutoriel vidéo CSS

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!