背景图片不显示主因是CSS中url()路径以CSS文件位置为基准而非HTML页面。应使用相对路径（如../images/bg.png）或根路径（如/images/bg.png），避免本地文件路径；命名禁用中文空格，推荐英文下划线；动态切换需JS或构建工具配合。
背景图片不显示，90% 是因为 url() 里的路径没对上 CSS 文件的位置，不是 HTML 页面的位置。
background-image 的 url() 路径永远以 CSS 文件为基准
很多人在 main.css 里写 url(images/bg.png)，结果浏览器去请求 /static/css/images/bg.png —— 因为 CSS 文件在 /static/css/，它就真从这个目录下找 images 子目录。但你的图其实在 /static/images/。这就是典型误判参考点。
- 相对路径（如
../images/bg.png）：从 CSS 文件所在目录出发，“..” 表示退到上一级，再进images - 根路径（即绝对路径，如
/images/bg.png）：从网站域名根开始，比如https://yoursite.com/images/bg.png，和 CSS 文件放哪无关 - 千万别用
file://或C:/xxx这类本地文件系统路径，现代浏览器直接拦截
什么时候该用 ../，什么时候该用 / ？
选哪个，取决于你是否愿意把资源路径和部署结构强绑定。
- 用
../：适合开发阶段或项目结构稳定、CSS 和资源目录关系固定的情况。移动 CSS 文件时，必须同步检查所有url()里的层级数 - 用
/（根路径）：部署时更可控，比如所有静态资源都放在/assets/下，就统一写url(/assets/images/icon.svg)；但换域名或加子路径（如部署到https://a.com/myapp/）时，得手动改前缀或用构建工具注入 - 避免混合使用：同一项目里一会儿
../images，一会儿/static/img，后期维护容易混乱
中文、空格、特殊字符导致 background-image 失效
直接写 url(背景图.jpg) 或 url(my image.png)，多数浏览器会截断或报 net::ERR_INVALID_URL，不是图片丢了，是 URL 解析失败。
立即学习“前端免费学习笔记（深入）”；
- 命名一律用英文、数字、下划线或短横线，例如
hero-bg.jpg、icon_arrow.svg - 实在要保留中文，必须 URI 编码，比如
url(%E8%83%8C%E6%99%AF%E5%9B%BE.jpg)，但不推荐——难读、易错、Git diff 不友好 - SVG 作背景时，
data:image/svg+xml;base64,...比url(…)更稳，完全规避路径问题
动态切换背景图？别指望纯 CSS 的 url() 实时计算
url() 本身不支持变量拼接或运行时路径生成，所谓“动态”，靠的是组合手段：
- CSS 变量 + JavaScript：定义
:root { --bg: url(/assets/default.jpg); }，再用document.documentElement.style.setProperty('--bg', 'url(/assets/theme2.jpg)') - 构建工具（Webpack/Vite）：在编译期把
url(./bg.png)自动转成带哈希的url(/assets/bg.a1b2c3.png)，同时校验文件是否存在 - 服务端渲染或内联 style：把最终路径由后端或 JS 注入到
style标签里，绕过 CSS 文件路径解析逻辑
真正容易被忽略的点是：路径错误往往不报 404，而是静默失败（尤其 SVG 或 base64 场景），建议打开浏览器 Network 面板，过滤 Img 类型，看实际请求地址是否符合预期。
