background-image 最常见问题是路径错误（需相对HTML文件而非CSS文件）和未设background-size导致只显示左上角；应优先用background-color与background-image分写实现fallback，配合cover/contain适配、2x图响应及硬件加速优化移动端表现。
background-image 用法和路径写错最常见
直接给 body 或容器加背景图，90% 的问题出在路径没写对，或者没配 background-size 导致图只显示左上角一小块。
- 路径必须相对 HTML 文件位置算，不是 CSS 文件位置——比如
img/bg.jpg是指和 HTML 同级的img文件夹 - 用绝对路径（
/assets/bg.jpg）更稳，前提是服务器根目录下真有这个路径 - 别忘了加
background-size: cover;或contain，否则大图默认平铺或只显示原尺寸左上角 - 如果图不显示，右键检查元素，看 computed 标签里
background-image值是不是none——是的话就是路径 404 或语法错了
background-image 和 background 不要混着写漏参数
background 是复合属性，一写就覆盖所有子属性，包括 background-color、background-repeat 等。新手常在这里丢掉重复控制或透明度。
- 单独设图用
background-image: url(...);最安全，其他属性按需补 - 如果用
background一行写，必须带全：比如background: url(bg.jpg) no-repeat center/cover #fff;，漏了no-repeat就会平铺 - 想让背景图上有半透明白色遮罩？别只写
background-color: rgba(255,255,255,0.7)，它会被background复合写法干掉，得用伪元素或叠加层
图片加载失败时怎么 fallback 到纯色
网络慢、路径错、CORS 限制都可能导致背景图空白，但用户不该看到一片死黑或刺眼白。
- 用两层
background：先写颜色，再写图，图加载失败自动回退到前面的颜色——background: #f0f0f0, url(bg.jpg);（注意逗号分隔） - 更稳妥的是用
background-image配background-color，两者互不干扰：background-color: #f0f0f0; background-image: url(bg.jpg); - 不要依赖
:not(:has(img))这类选择器做 fallback，CSS 里没有“图是否加载成功”的钩子
移动端背景图模糊或拉伸怎么办
PC 上看着正常，手机一打开图糊成一片，大概率是没处理好分辨率适配和缩放行为。
立即学习“前端免费学习笔记（深入）”；
-
background-size: cover;在小屏上会裁剪，contain又留白太多；可改用100% 100%强制拉满，但得确保图够宽高比 - 高清屏（dpr > 1）下图发虚？准备 2x 图并用媒体查询切换：
background-image: url(bg@2x.jpg);配@media (-webkit-min-device-pixel-ratio: 2) - iOS Safari 对
background-attachment: fixed支持差，滚动时图会跳或卡顿，真要用就加-webkit-transform: translateZ(0);强制硬件加速
背景图看着简单，但路径、尺寸、fallback、DPR 四个点串起来，一个没对齐就全崩。特别是路径和 background-size，调完记得在不同设备真机预览一次。
