求助：网站Div盒子背景图片无法显示问题

嘿，我来帮你捋捋这个背景图不显示的问题！你写的CSS代码逻辑上是没问题的，大概率是细节上的小疏漏，咱们一步步排查：

• 图片路径是最常见的坑
  你用的url(/img/header.jpg)是根路径写法，这要求你的网站根目录下必须有一个img文件夹，且里面确实存在header.jpg文件。如果你的项目结构是类似这样的：

  项目根目录/
  ├─ img/
  │  └─ header.jpg
  ├─ css/
  │  └─ style.css
  └─ index.html
  

  那这个路径是对的，但如果img文件夹和css文件夹同级（比如都在根目录下），那你应该用相对路径../img/header.jpg（../表示回到上一级目录）。
  快速验证方法：直接在浏览器地址栏输入你预期的图片完整地址（比如http://你的网站域名/img/header.jpg），如果打不开图片，那肯定是路径错了。

• 检查图片本身的问题

  • 文件名拼写要精准：比如Linux服务器区分大小写，Header.jpg和header.jpg会被当成两个不同的文件；后缀名也别写错，比如把.jpeg写成了.jpg。
  • 图片有没有损坏？直接打开本地的图片文件，确认它能正常显示。

• 看看有没有CSS样式冲突
  打开浏览器开发者工具（按F12），选中这个.box元素，查看它的样式面板，看看background-image是不是被划掉了——这说明有其他优先级更高的CSS规则覆盖了它。比如有没有更具体的选择器（比如#main .box）或者带!important的样式修改了背景。

• 最后排除盒子尺寸问题
  不过你已经给.box设置了明确的width:600px和height:400px，所以这个可能性很小，但如果后续调整路径后还是不行，可以再确认下盒子有没有正常渲染出尺寸。

小技巧：可以先把路径换成绝对路径（比如本地的file:///C:/你的项目路径/img/header.jpg）测试，如果能显示，就确定是路径配置的问题，再调整成合适的相对路径就好啦！

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