CSS文件置于独立文件夹时background-image无法加载的问题求助

嘿，我之前也踩过这个路径的坑！太懂这种明明其他资源都正常，就背景图白屏的烦躁了，给你几个实用的排查和解决方法：

• 先核对文件结构是否匹配你的路径
  先确认你的项目文件夹层级是不是这样的（如果不是，路径要对应调整）：

  你的项目根目录/
  ├─ index.html       // 页面文件
  ├─ css/
  │  └─ index.css     // 你的样式文件
  └─ images/
     └─ bg-image.jpg  // 背景图片
  

  如果是这个结构，background-image: url(../images/bg-image.jpg)的写法是逻辑正确的，但可能有其他细节问题。

• 查看浏览器控制台的错误信息
  按下F12打开开发者工具，切换到「Network」面板，刷新页面后看背景图片的请求状态：

  • 如果是404错误，说明路径还是错了——检查文件名的大小写（Linux服务器上区分大小写，比如Bg.jpg和bg.jpg是两个文件）、有没有拼写错误，或者是不是多写/少写了斜杠。
  • 看看请求的路径是不是和你预期的一致，比如会不会变成css/images/bg-image.jpg（这说明你的路径没写对，没跳出css文件夹）。

• 试试基于根目录的绝对路径
  把路径改成url(/images/bg-image.jpg)，前面加个斜杠，这样不管你的CSS文件在哪个文件夹里，浏览器都会从网站的根目录开始找images文件夹，这个方法能避开层级嵌套带来的路径混乱，很多时候直接就能解决问题。

• 检查CSS写法的细节
  虽然不加引号也能生效，但有时候特殊字符或者浏览器兼容问题会导致路径识别失败，试试给路径加上引号：

  background-image: url("../images/bg-image.jpg");
  

  另外也可以顺便检查有没有漏写background-repeat、background-size这些属性，不过你说根目录CSS正常的话，这个可能性比较小。

• 强制清除浏览器缓存
  有时候浏览器会缓存旧的CSS路径，导致新的路径不生效。按下Ctrl+Shift+R（Windows/Linux）或者Cmd+Shift+R（Mac）强制刷新页面，或者在开发者工具的「Network」面板勾选「禁用缓存」后再刷新试试。

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