浏览器按精确路径请求 background-image，路径错则 404；相对路径以 index.html 为基准，根路径 / 仅在本地服务器或上线后有效；需确保元素有宽高、未被隐藏或裁切；避免 windows 反斜杠、大小写、空格及中文文件名问题；优先使用 .jpg/.png/.webp 格式并验证 MIME 类型。
检查 background-image 路径是否真正可达
浏览器不会“猜”图片在哪，它只按你写的路径去请求——路径错一点，就返回 404，背景直接空白。关键不是“看起来像对”，而是“请求地址能打开”。
- 用相对路径时，基准永远是当前
index.html所在目录，不是编辑器打开的位置，也不是服务器根目录 -
./images/bg.jpg表示 HTML 同级有个images文件夹；../assets/bg.jpg表示往上退一级再进assets - 以
/开头（如/images/bg.jpg）是网站根路径，仅在本地服务器（如python3 -m http.server）或上线后有效；双击 HTML 用file://协议打开时，这种写法会去系统根目录找，必失败 - 右键页面 → “检查” → 切到 Network 标签页，刷新页面，找那个图片请求：状态码不是
200？点开看 Preview —— 是空白或报错？那路径就是错的
确认元素有宽高且未被隐藏
background-image 不会撑开元素，如果容器没尺寸、没内容、或者被样式压没了，图就等于没画出来。
- 给背景容器加
height: 100vh或明确的height: 500px，别依赖内容撑高 - 避免父元素
overflow: hidden+ 背景偏移过大导致裁切 - 检查是否误设了
display: none、visibility: hidden或opacity: 0 - 临时加
border: 1px solid red到该元素上，一眼看出它到底占不占空间
警惕 Windows 路径里的反斜杠和大小写陷阱
开发时直接粘贴文件资源管理器路径（如 C:Usersmeprojbg.jpg）进 css，几乎必挂——CSS 把单个 当转义符处理，U 会被解析成 Unicode 字符。
- 绝对路径仅限本地调试，且必须双反斜杠：
url('C:\Users\me\proj\bg.jpg') - 但更稳妥的做法是：把图片放进项目目录，统一用相对路径，彻底避开系统路径差异
- linux/macOS 服务器区分大小写：
bg.JPG和bg.jpg是两个文件；本地 Windows 可能不报错，一上线就 404 - 文件名含空格或中文？浏览器可能编码异常，改用
bg-hero.jpg这类纯英文+短横线命名
验证图片格式与 MIME 类型是否被支持
不是所有图片都能当背景用，尤其在老旧环境或某些服务器配置下。
立即学习“前端免费学习笔记（深入）”；
- 优先用
.jpg、.png、.webp；避开.heic、.tiff、.bmp等兼容性差的格式 - 用浏览器直接访问图片 URL（比如复制
background-image里的路径，粘贴进新标签页）：能正常显示？说明格式没问题；报错或乱码？说明服务器没返回正确的Content-Type（应为image/jpeg等） - 某些 CDN 或静态托管（如 gitHub Pages）默认不支持 WebP，若用了，得 fallback 到 PNG
真正卡住人的，往往不是技术多难，而是路径看着对、文件明明在、控制台又没报错——结果图就是不出现。这时候别猜，直接打开 Network 面板看那个图片请求的状态码和响应体，90% 的问题当场定位。