CSS 背景图加载不出来，十个里有八个是路径解析基准搞错了。核心规则一句话：background-image: url() 里的相对路径，是相对于 CSS 文件自身的位置，而不是相对于 HTML 页面——这跟 <img> 标签的相对路径基准完全不同，也是最大的认知陷阱。本文把写法和排查方法一次说清。

一、三种路径写法与各自的基准

1.1 相对路径（基准 = CSS 文件所在目录）

/* 文件位置：/css/style.css，图片在 /css/images/bg.jpg */
.banner { background-image: url(images/bg.jpg); }

/* 图片在 /static/images/bg.jpg（CSS 同级的 static 目录） */
.banner { background-image: url(../static/images/bg.jpg); }

HTML 无论放在站点哪个层级，引用的都是这一份 CSS，路径就永远以 /css/ 为原点。很多教程里“换个页面就图裂”，根源就在这。

1.2 站点根相对路径（以 / 开头，基准 = 域名根）

.banner { background-image: url(/static/images/bg.jpg); }

最省心、也最常用：不管 CSS 在哪个目录，从站点根算起。子目录部署（如 /blog/）时要注意加项目前缀，否则会指到主站根。

1.3 绝对 URL

.banner { background-image: url(https://cdn.example.com/img/bg.jpg); }

外链 CDN 适合大站提速，但要处理防盗链与混合内容（HTTPS 页面引 HTTP 图会被浏览器拦截，表现为偶发不显示）。

二、写规范的细节

• 带空格或中文的路径必须加引号或转义：url("images/my bg.jpg")，或写成 url(images/my%20bg.jpg)；漏引号时整条声明会被解析失败静默丢弃。
• 永远写回退色：background: #f4f6f8 url(/img/bg.jpg) no-repeat center / cover;。图挂了还有底色，布局不会塌。
• 用简写 background 时把 url 放中间，属性顺序错了不会报错，但可读性差、后续追加 background-size 覆盖容易乱。
• 多倍图规范写法：

.hero { background-image: url(/img/hero@1x.jpg); }
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .hero { background-image: url(/img/hero@2x.jpg); background-size: 600px 400px; }
}

三、图裂了什么原因：按这个顺序查

1. F12 → Network 过滤 Img → 刷新页面，直接看那张图的真实请求 URL 和状态码。这一步能秒杀 90% 的问题，不用猜。
2. 404：路径基准错或大小写不符（Linux 服务器文件名区分大小写，Windows 本地正常、上线就裂，几乎全因这个）。
3. 403：目录权限/防盗链。图片目录 644、文件属主要对；CDN 签名过期也会 403。
4. (blocked:mixed-content)：HTTPS 页面里写了 http 图片地址，改协议相对写法 //cdn... 或直接上 https。
5. 请求压根没发出去：说明 CSS 声明本身解析失败——检查引号、括号、分号；或在 DevTools 的 Computed 里看 background-image 是不是 none。
6. 能加载但显示不全：那是 background-size 与容器高度问题，不是路径问题：cover 铺满裁边、contain 完整留白；容器没高度时背景图等于隐形，记得给 height 或 aspect-ratio。

四、和 <img> 的取舍规范

一个容易吵起来的问题：什么时候用背景图、什么时候用 <img>？实用原则：

• 装饰性图（纹理、渐变背景、卡片头图）→ background-image，不干扰可访问性、便于伪类换图。
• 内容性图（产品图、文章配图）→ <img>：能被搜索引擎收录、可写 alt、能触发懒加载与图片信控。
• 需要 srcset 自适应分辨率也只能靠 <img>，background 的 image-set() 兼容性仍有限。

五、常见问题 FAQ

问：框架里（Vue/React）写 url 老是不生效？
答：构建工具会对 CSS 里的相对路径做别名重绑定，建议 @ 别名或交给 background: url(~@/assets/bg.png)（webpack）/ import 后行内 style 处理（vite 推荐 import 资源再赋值）。

问：base 标签能改背景图基准吗？
答：不能。<base> 只影响 HTML 文档内的相对链接，CSS 内 url() 永远以样式文件位置为基准。

总结记忆点：① url() 相对路径以 CSS 文件为基准，拿不准就用 / 开头根路径；② 永远带回退底色；③ 图裂先开 Network 面板看真实请求与状态码，再看是不是大小写/权限/混合内容，最后才怀疑缓存。

• css
• 前端
• background-image