本文详解css中背景图片路径错误的常见原因，重点讲解相对路径的层级关系，并提供可直接复用的修复方案与调试技巧。
本文详解css中背景图片路径错误的常见原因，重点讲解相对路径的层级关系，并提供可直接复用的修复方案与调试技巧。
在网页开发中，页眉（header）区域常通过CSS background-image 属性嵌入Logo图像。但即便HTML结构无误、图片文件真实存在，Logo仍不显示——这绝大多数情况下并非代码语法错误，而是CSS文件中图片路径的相对定位不准确所致。
以提问者项目为例：其目录结构为
project/ ├── css/ │ └── style.css ← 当前CSS文件所在位置 ├── img/ │ └── logo.png ← Logo图片实际存放位置 └── index.html
此时，在 style.css 中若写成 url('img/logo.png')，浏览器会尝试在 css/img/logo.png 路径下查找图片——显然不存在。正确做法是使用 ../ 返回上一级目录，再进入 img/ 文件夹：
#logo-img {
background: url('../img/logo.png') no-repeat;
width: 150px;
height: 150px;
margin: 10px 15px 10px 0;
}⚠️ 关键注意事项：
立即学习“前端免费学习笔记（深入）”；
- url() 中的路径始终相对于CSS文件所在位置，而非HTML文件；
- 使用 ../ 表示向上一级目录，./ 表示当前目录（可省略），/ 开头则为根目录绝对路径（需确保服务器配置支持）；
- 推荐优先使用相对路径（如 ../img/logo.png），避免因部署路径变化导致失效；
- 若仍不显示，请检查：① 图片文件名大小写是否完全一致（Linux服务器区分大小写）；② 浏览器开发者工具「Network」标签中该图片请求是否返回 404；③ 是否遗漏了 width 和 height —— 无尺寸定义时，空背景容器不可见。
总结：CSS背景图失效，90%源于路径层级误解。牢记“CSS定路径，路径看CSS位置”，结合目录树逐级验证，即可快速定位并修复。
