HTML作业中头部横幅图片及背景图片无法显示求助

看起来你遇到的是典型的相对路径错误——毕竟CSS其他样式都正常生效，说明CSS文件本身已经被正确加载，只是图片的引用路径没匹配上文件结构。

先确认你的文件结构（应该是这样吧？） #

assign1_1/
├─ 你的HTML文件（比如index.html）
├─ images/
│  └─ 你的头部图片、背景图（比如banner.jpg、bg.png）
└─ styles/
   └─ 你的CSS文件（比如style.css）

问题核心：CSS里的路径是相对CSS文件本身的 #

你的CSS文件放在styles文件夹里，当你在CSS中写url('images/banner.jpg')时，浏览器会去styles/images/banner.jpg找图片——但你的图片实际在assign1_1/images/里，所以路径完全不对。

修正方法：使用../回到上一级目录 #

把CSS里的图片路径改成从styles文件夹退到assign1_1，再进入images文件夹：

/* 错误示例 */
header {
  background-image: url('banner.jpg'); /* 浏览器会找 styles/banner.jpg */
  /* 或者 url('images/banner.jpg')，浏览器会找 styles/images/banner.jpg */
}

/* 正确示例 */
header {
  background-image: url('../images/banner.jpg'); /* 回到assign1_1，再进images找图片 */
}

额外排查点 #

• 文件名大小写统一：比如CSS里写Banner.jpg，但实际文件是banner.jpg，Windows系统可能不区分，但部署到服务器或其他系统时会出错，建议全用小写字母命名。
• 文件名不要有特殊字符：避免空格、中文或奇怪符号，用下划线/连字符代替，比如header_banner.jpg。
• 检查容器尺寸：如果路径对了但图片还是不显示，看看header这类容器有没有设置宽高——没有尺寸的话，背景图会“藏”起来。
• 用浏览器开发者工具验证：按F12打开开发者工具，找到对应元素，查看背景图片的URL，点击URL如果无法打开，说明路径还是错的；如果能打开，再检查样式是否被覆盖。

另外要注意：如果是HTML里直接用<img>标签引用图片，路径是相对HTML文件的，应该写images/banner.jpg，和CSS里的路径不一样，别搞混哦～

内容的提问来源于stack exchange，提问作者vKarnival