CSS定义的类背景图在网页不显示，图片路径无法识别是什么原因？

问题原因及解决方法 #

• 路径对应错误
  你写的url("../img/home.jpg")是相对CSS文件所在位置解析的，该路径会定位到static/img/home.jpg，请先确认你的项目结构是否和以下结构完全匹配：

项目根目录
├─ index.html
└─ static
   ├─ css
   │  └─ style.css
   ├─ img
   │  └─ home.jpg
   └─ js
      └─ script.js

如果你的img文件夹是放在项目根目录而非static目录下，需要把路径修改为url("../../img/home.jpg")；也可以直接使用根路径写法url("/static/img/home.jpg")（需使用本地服务打开项目生效）。

• 文件名大小写不匹配
  Linux服务器对文件名大小写敏感，如果你的图片实际命名为Home.jpg/home.JPG或者存在拼写偏差，就会触发404错误，请核对图片的实际文件名及后缀。
• 本地打开方式问题
  如果是直接双击html文件用file://协议打开，浏览器对相对路径的解析规则会和http协议不同，导致资源找不到，建议用VS Code的Live Server等本地静态服务打开项目测试。
• div无尺寸导致背景不可见（路径修复后仍不显示的补充排查）
  你当前的.first-div没有任何内容，也没有设置宽高属性，默认高度为0，就算背景图加载成功也无法显示，需要给该类补充宽高配置，例如：

.first-div {
    background-image: url("../img/home.jpg");
    background-size: cover;
    width: 100%;
    height: 100vh;
}

你可以打开浏览器控制台的网络面板，查看home.jpg的实际请求地址，和你本地的图片存放地址对比，就能快速定位路径错误点。

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