背景图片不显示最常见的原因是background-image路径错误；CSS路径相对于CSS文件位置而非HTML文件，需确认相对路径正确、文件真实存在且命名严格匹配（含大小写），并用开发者工具Network标签检查请求状态码。
背景图片不显示，最常见原因是 background-image 路径写错了。CSS 里的路径是相对于 CSS 文件所在位置计算的，不是相对于 HTML 文件，这点很多人会搞混。
检查图片路径是否为相对路径且位置正确
CSS 中写的路径必须准确指向图片文件。比如你的项目结构是：
- css/style.css
- images/bg.jpg
那么在 style.css 里应该这样写：
background-image: url("../images/bg.jpg");注意：从 css/ 目录向上退一级（../），再进 images/ 才能找到图片。
立即学习“前端免费学习笔记（深入）”；
确认图片文件真实存在且命名完全一致
大小写、空格、扩展名都要严格匹配。Windows 系统可能不敏感，但服务器（尤其是 Linux）区分大小写。例如：
- 写成 bg.JPG，但实际文件是 bg.jpg → 不显示
- 路径中多了空格，如 url(" images/bg.jpg") → 不生效
- 用了中文或特殊字符命名，未编码也容易出错
用浏览器开发者工具快速定位问题
右键页面 →「检查」→ 切到「Network」标签 → 刷新页面 → 在筛选栏输入图片名（如 bg.jpg）：
- 如果没出现，说明 CSS 根本没加载该请求（路径错或样式未生效）
- 如果状态码是 404，说明路径不对
- 如果状态码是 200 但图片仍不显示，可能是尺寸、重复方式或元素本身无宽高导致不可见
临时改用绝对路径或在线图片快速验证
为排除路径干扰，可先用绝对路径测试（开发阶段）：
background-image: url("/images/bg.jpg"); /* 以网站根目录为起点 */或者直接用一张在线图片：
background-image: url("https://via.placeholder.com/200x100/4a90e2/ffffff?text=Test");如果这时能显示，就 100% 确认是本地路径问题，再回头核对相对路径。
