CSS背景图不显示主因是路径错误或资源未加载，因background-image路径始终相对CSS文件位置；需检查路径逻辑、引号格式、文件名大小写、元素宽高及样式覆盖等。

CSS背景图片不显示，绝大多数情况是路径写错或资源未正确加载，而不是语法本身有问题。关键在于理解 background-image 的路径解析逻辑——它**始终相对于CSS文件所在位置**，而非HTML文件。

路径写错：最常见也最容易忽略

CSS中写路径时，很多人习惯按HTML中 的方式去写，但两者规则完全不同：

• HTML中的 src 是相对于当前HTML文件的位置
• CSS中的 background-image: url(...) 是相对于该CSS文件的物理位置

例如：
- 项目结构为：/index.html、/css/style.css、/images/bg.jpg
- 在 style.css 中写 background-image: url("images/bg.jpg"); ✅（正确，从css目录出发找images）
- 若写成 url("../images/bg.jpg") ❌（错误，会去上层找，而css在/css/下，上层是根目录，但images在根下同级）

URL中漏掉引号或写错格式

url() 内部不是必须加引号，但含空格、括号、特殊符号时必须加；更稳妥的做法是统一用引号包裹：

• ✅ background-image: url("bg.jpg");
• ✅ background-image: url('./bg.jpg');
• ❌ background-image: url(bg.jpg);（虽多数浏览器能容错，但不推荐）
• ❌ background-image: url("bg.jpg);（引号不匹配，语法错误）

图片路径存在但404，或被服务器拦截

即使路径逻辑正确，也可能因以下原因无法加载：

• 图片文件名大小写不符（尤其部署到Linux服务器时，Bg.jpg ≠ bg.jpg）
• 图片实际不存在、拼写错误，或扩展名不对（如误写成 .jpeg 但文件是 .jpg）
• 开发服务器未开启静态资源服务（如用 python -m http.server 时路径正常，但直接双击打开HTML会因跨域限制导致 background-image 失效）
• 某些CDN或Nginx配置禁止了图片类型直链访问

其他容易踩的坑

除了路径和资源问题，这些细节也会导致背景图“看不见”：

• 元素没有宽高：div默认高度为0，设了背景图也看不到。需显式设置 width 和 height，或有内容撑开
• 被其他样式覆盖：比如写了 background: #fff;，会清空之前所有 background 属性（包括 image）
• 层级或透明度问题：父元素设置了 opacity: 0 或 visibility: hidden，子元素背景自然不可见
• 使用了 background-size: cover / contain 但容器比例极端：可能导致图片缩放后“跑出可视区”，建议先用 background-size: 100% 100% 测试是否加载成功