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

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!