Maison > Article > interface Web > 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 :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!