body背景不生效因默认无高度，需设min-height:100vh且html加height:100%；禁用内联style写法，推荐css中定义并配background-size、background-attachment及响应式降级。
background 写在 body 样式里为什么经常不生效
因为 body 默认没有高度，且多数 CSS 框架（如 Bootstrap）或重置样式会把 body 的 margin 设为 0、min-height 缺失，导致背景图只渲染“内容撑起的高度”，而不是全屏。
常见现象：图片只在文字区域显示，页面下方一片空白；或者刷新时闪一下就消失。
- 必须给
body显式设置min-height: 100vh（不是100%，后者依赖父容器高度，而html可能没设高） -
html元素也要加height: 100%或min-height: 100%，否则vh在某些旧浏览器中行为异常 - 避免仅靠
background: url(...) no-repeat;，漏写background-size和background-position容易导致图片偏移或裁切
内联 style 中用 background 设置图片的隐患
内联写法如 看似快捷，但实际埋了三个硬伤：
- 路径解析依赖当前 HTML 文件位置，迁移到子目录或构建后路径容易 404（尤其 Webpack/Vite 中资源被 hash，内联写死路径直接失效）
- 无法利用 CSS 预处理器变量或主题切换能力（比如暗色模式下换背景图，内联写死就只能 JS 动态改，破坏样式分离原则）
- 调试困难：
Computed面板里内联样式权重最高，覆盖外部 CSS 时你可能根本意识不到是它在干扰
错误示例：background: url(images/bg.png) fixed; —— fixed 在移动端常触发渲染 bug，且未设 background-size，小图会被重复平铺
推荐写法：CSS 文件中定义 + 响应式兜底
把背景逻辑收口到 CSS，兼顾可维护性和兼容性：
html {
min-height: 100%;
}
body {
margin: 0;
min-height: 100vh;
background: #f0f0f0 url('./assets/bg.jpg') no-repeat center center;
background-size: cover;
/* iOS Safari 有时对 cover 渲染不准，加这句增强兼容 */
background-attachment: scroll;
}
/* 小屏设备降级为纯色，避免图片加载慢或拉伸失真 */
@media (max-width: 768px) {
body {
background-image: none;
background-color: #e8e8e8;
}
}
-
background复合属性里顺序不能乱：颜色必须在 url 前，否则会被覆盖 -
background-attachment: scroll是关键，fixed在 iOS 上可能导致背景图错位或卡顿 - 使用相对路径时，确保 CSS 文件与图片路径关系稳定；构建工具项目建议用
url('@/assets/...')（Vite）或~assets/...（Webpack）别名
如果非得用 JS 动态设背景图，怎么避开内联陷阱
用 document.body.style.backgroundImage 而不是整个 background，保留其他背景属性（颜色、尺寸、定位）由 CSS 控制：
// ✅ 安全做法：只动图片部分
document.body.style.backgroundImage = "url('" + imgUrl + "')";
// ❌ 危险做法：覆盖全部 background，可能清掉 background-size 或 color
document.body.style.background = "url(...) no-repeat center/cover";
- 动态图路径必须经过 URL 编码（尤其含空格或中文），用
encodeURIComponent()包一层 - 首次设置前先检查图片是否加载成功，失败时 fallback 到 CSS 定义的默认背景色
- 不要在 React/Vue 组件挂载时直接操作
body.style，需确保 DOM 已就绪（比如useEffect(() => { ... }, [])或mounted钩子）
最麻烦的从来不是怎么设背景，而是设完之后——滚动时背景是否跟随、缩放时是否模糊、深色模式下是否还合理、低网速用户看到的是空白还是占位色。这些细节不写进 CSS 规则里，光靠一行 background 声明扛不住。
