background-image 失效主因是路径错误（相对CSS文件）或元素无高度，需配合background-size:cover等属性；body全屏背景须清margin、设min-height:100vh；响应式推荐cover/contain，高DPR用image-set()或媒体查询；SVG/渐变更轻量。
background-image 用法和常见失效原因
网页背景图不显示，八成是 background-image 路径或加载时机出了问题。它不是直接插图，而是 CSS 层叠样式里的一个属性，必须配合 background-size、background-repeat 等一起用才可控。
常见错误现象：404 Not Found（路径错）、页面空白（元素没高度）、图只显示左上角一小块（没设 background-size: cover）。
- 路径必须相对于 CSS 文件位置，不是 HTML 文件——如果 CSS 在
/css/style.css，图片在/images/bg.jpg，就得写url("../images/bg.jpg") - 目标元素（比如
或<div class="hero">）必须有明确高度，否则背景无处可展；<code>height: 100vh比height: 100%更可靠 - 别只写
background-image：至少补上background-size: cover和background-repeat: no-repeat，否则默认平铺且不缩放 -
body默认 margin 有浏览器默认值（如 8px），先用* { margin: 0; }或body { margin: 0; }清掉，否则背景边缘会露白边 - 加
min-height: 100vh而非height: 100vh，避免内容超长时背景被截断 - 如果图太暗或太亮，文字看不清，直接加一层半透黑色遮罩更稳妥：
background: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)), url("bg.jpg") -
background-size: cover保证填满且不形变，但可能裁剪边缘；contain保证全貌可见，但留黑边——按设计需求二选一 - 高 DPR 设备（如 Retina 屏）需提供 2x 图：用
image-set()或媒体查询切换，例如@media (-webkit-min-device-pixel-ratio: 2)里重写background-image - 慎用
background-attachment: fixed：在 iOS Safari 和部分安卓浏览器中会触发渲染 bug，导致滚动卡顿或背景消失 - SVG 作为背景：把 SVG 内容 URL 编码后塞进
url("data:image/svg+xml,%3Csvg...%3E")，适合图标、纹理等小图形 - 线性渐变示例：
background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%)，比图片更快，也方便用 JS 动态改style.background - 如果必须用图片但想降级，可叠加多层
background-image：前面放 SVG 或渐变，后面放 JPG，现代浏览器会覆盖，老浏览器只认第一个
body 上设全屏背景的实操要点
想让背景图撑满整个视口， 是最常用载体，但默认它不会自动占满屏幕高度，得手动干预。
响应式背景图的兼容写法
同一张图在手机上拉伸变形、在桌面端模糊，往往是因为没适配分辨率或没选对 background-size 值。
立即学习“前端免费学习笔记（深入）”；
SVG 或渐变替代图片的轻量方案
纯色+简单几何图案的背景，真没必要发 HTTP 请求加载 JPG/PNG——用内联 SVG 或 CSS 渐变，体积小、缩放无损、还能用 CSS 变量动态改色。
真正难的不是“怎么加”，而是“加完是否在所有设备上都按预期出现”——路径、尺寸、DPR、滚动行为、父容器高度，任何一个环节松动，背景就可能失踪或错位。
