background-image 失效主因是路径解析基准错（相对css文件而非html）、元素无尺寸、file://协议跨域限制；须用相对路径、设background-size和background-repeat、启动本地http服务调试。
background-image 用法和路径陷阱
直接写 background-image: url("xxx.jpg") 很容易失效，根本原因是路径相对于 CSS 文件位置解析，不是 HTML 页面位置。本地开发时常见现象是图片在编辑器里能预览，但浏览器里 404 —— 实际就是路径算错了。
- 如果 CSS 写在
<style></style>标签里（内联样式），路径以 HTML 文件所在目录为基准 - 如果 CSS 在独立文件中（比如
style.css），路径以该 CSS 文件所在目录为基准 - 推荐统一用相对路径，避免用
file://或绝对路径；线上环境更不能依赖本地盘符（如C:/img/） - 路径里有空格或中文？立刻改掉，否则多数浏览器会静默失败
必须同时设 background-size 和 background-repeat
只设 background-image，图片大概率显示异常：要么只贴左上角一小块，要么横向纵向无限平铺。这是因为默认行为是 background-repeat: repeat 和 background-size: auto。
- 想让图片铺满整个容器：加
background-size: cover（保持比例裁剪）或background-size: 100% 100%（强制拉伸，可能变形） - 不想平铺：必须显式写
background-repeat: no-repeat - 常用组合：
background: url("bg.jpg") no-repeat center / cover;—— 一行搞定，/前是 position，后是 size
元素没尺寸，背景图就“消失”
div、section 这类块级元素如果没有内容、没有高度设置，实际渲染高度为 0，背景图自然不可见。这不是 bug，是盒模型的正常表现。
- 检查元素是否真的占空间：用浏览器开发者工具选中元素，看 computed height 是否为 0
- 临时调试可加
height: 200px或min-height: 100vh确认背景是否加载成功 - 如果依赖内容撑开高度，但内容为空，考虑加
padding或min-height而非单纯靠内容 - flex 或 Grid 容器里子元素设背景，也要确认父容器有尺寸，否则子元素可能收缩为 0
图片跨域或 MIME 类型不对也会不显示
本地双击打开 HTML 文件（file:// 协议）时，chrome 等浏览器会阻止 background-image 加载本地图片，报错类似 access to image at 'file:///xxx.jpg' from origin 'NULL' is therefore not allowed。
立即学习“前端免费学习笔记（深入）”；
- 解决方法只有启动一个本地服务，比如用 Python：
python3 -m http.server，然后访问http://localhost:8000 - 服务器返回图片时若 MIME 类型错误（例如 .jpg 文件被当成
text/plain），背景图同样不渲染，检查 Network 面板的 Response Headers 中Content-Type - Base64 编码可绕过路径和跨域问题，但仅适合小图：
background-image: url("data:image/png;base64,iVBOR...")
背景图的“看不见”，八成不是语法错，而是路径、尺寸、协议这三个地方卡住了。尤其本地开发时，别信双击打开的 HTML，一定要走 HTTP 服务。