div元素背景图片无法显示，请求协助排查问题原因

AI 小北

2026-8-16

背景图不显示的原因及修复方案

核心错误点&原因

高度失效导致元素无尺寸：.banner设置了height:100%，但HTML和body默认没有高度，子元素的百分比高度会继承不到有效数值，最终这个div高度为0，背景图自然无法显示。
图片路径可能错误：url(/wall2.jpg)是根路径写法，只有当图片放在网站服务器的根目录（比如Apache的htdocs根文件夹）时才有效。如果图片和你的HTML文件在同一目录，应该用相对路径url('wall2.jpg')或url('./wall2.jpg')；如果在子文件夹，比如images/wall2.jpg，就写url('./images/wall2.jpg')。
宽度单位误用：width:100vh是取视口高度的100%，这会导致宽度随窗口高度变化，正常全屏宽度应该用100vw（视口宽度）。

修正后的代码

CSS

/* 先给根元素和body设置高度，确保子元素百分比高度生效 */
html, body {
  height: 100%;
  margin: 0; /* 去掉默认边距，避免滚动条 */
}

.banner {
  height: 100%;
  width: 100vw; /* 修正为视口宽度 */
  background-image: linear-gradient(rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.75)), url('wall2.jpg'); /* 改用相对路径，根据实际位置调整 */
  background-size: cover;
  background-position: center;
}