background-image 的 url() 路径始终相对于 CSS 文件所在目录；例如 CSS 在 css/style.css、图片在 images/bg.jpg（与 css 同级），则必须写 url('../images/bg.jpg')，否则 404。
background-image 的 url() 路径是相对 CSS 文件位置的
很多人以为 url('images/bg.jpg') 是相对于 HTML 文件，其实不是。CSS 解析器只认当前 CSS 文件所在目录为基准点。比如 CSS 文件在 css/style.css，图片在 images/bg.jpg（与 css/ 同级），那必须写成 url('../images/bg.jpg') —— 少一个 ../ 就 404。
常见错误包括：
- 把 HTML 中的相对路径习惯直接搬进 CSS（
url('images/bg.jpg')在内联里可能碰巧对，但抽成外部 CSS 就崩） - 误以为
./总是安全的，但在标签里url('./bg.jpg')实际解析为 HTML 所在目录，而外部 CSS 里它又指向 CSS 文件目录，行为不一致 - 用 Webpack/Vite 等构建工具时，未配置
url()资源处理，导致路径被忽略或打包错位
background 简写会悄悄清掉 background-image
写 background: #fff; 看似只是设个色，但它等价于 background: #fff none repeat scroll 0% 0% / auto; —— 其中 none 就是把 background-image 给重置了。哪怕之前已用 background-image: url(...) 单独声明过，也会被覆盖。
避免方式：
- 要么全程用简写：
background: url('/images/bg.jpg') no-repeat center/cover; - 要么彻底拆开：
background-color、background-image、background-size等各写一行，互不干扰 - 检查开发者工具 Elements 面板里该元素的最终
background-image值，带删除线就说明被更高优先级规则干掉了
引号、斜杠、编码这些细节真会卡住加载
url() 里引号必须是英文单引号或双引号，中文引号 “” 或 ‘’ 直接让整条规则失效；路径里混入空格或特殊字符（如括号、中文）没做 URL 编码，也会触发解析失败。
典型陷阱：
-
url("背景图.jpg")→ 浏览器可能拒绝加载（尤其在严格 MIME 类型检查下） -
url(images/bg.jpg)（没引号）→ 多数浏览器能容错，但遇到空格或连字符就挂 -
url(/static/bg.jpg)写成url(\static\bg.jpg)（反斜杠）→ Windows 用户易犯，CSS 不认反斜杠 - 本地开发用 file:// 协议时，
url(/xxx.jpg)会被解析为系统根目录，必然 404；此时只能用相对路径或起本地服务
Spring Boot / Django / Vite 等环境有各自路径惯性
框架不会改 CSS 规范，但会改变静态资源部署结构和访问入口，进而放大路径问题。
比如：
- Django 模板里推荐用
{% static 'images/bg.jpg' %}，硬写url('/static/images/bg.jpg')要确保STATIC_URL = '/static/'且 Nginx/Apache 没拦截/static/路径 - Spring Boot 默认把
src/main/resources/static/映射为根路径，所以url('/images/bg.jpg')对应的是static/images/bg.jpg，不是项目根目录 - Vite 项目中，放在
public/下的文件用绝对路径url('/bg.jpg')，而src/assets/下的要用url('@/assets/bg.jpg')（需配合别名配置）
最麻烦的是：同一段 CSS，在本地开发服务器跑得通，一上生产 Nginx 就 404——往往因为 Nginx 没把 /static/ 或 /images/ 路由正确代理到磁盘路径。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
