应使用 css 文件中的 background-image 配合 background-size、background-position 等属性控制背景，而非 body 的内联 background 属性；需设置 html{min-height:100%} 和 body{margin:0;min-height:100vh} 以确保高度支撑，避免兼容性与维护问题。
别用 body 的 background 属性——HTML5 已彻底废弃，现代浏览器虽可能兼容，但构建工具、CI 检查、W3C 验证都会报错，且无法控制平铺、缩放、定位等关键行为。
为什么 background 属性在 body 上经常不显示
不是代码写错了，而是它根本没“生效范围”：body 默认没有高度，只包裹内容；如果页面内容很短，body 就只有几像素高，背景图自然只在顶部闪一下。更麻烦的是，很多 CSS 重置（如 Normalize.css）或框架（如 Bootstrap）会主动设 body { margin: 0; background: transparent; }，直接覆盖你的内联 background 值。
- 必须给
html加min-height: 100%（不是100vh），否则vh在某些旧版 Safari 中计算异常 - 必须给
body加margin: 0和min-height: 100vh（注意是min-height，不是height，否则长页面会被截断） - 仅写
background="bg.jpg"不会阻止平铺，也不居中，更不会适配屏幕尺寸
background-image 必须配合 background-size 和 background-position
单独写 background-image: url(...) 等于只开了个门，没装锁、没调灯光、也没铺地板——图片大概率被拉伸、偏移、重复，或在移动端完全错位。
-
background-size: cover是最常用选择，但 iOS Safari 对cover渲染偶有偏差，建议补一句background-size: 100% 100%, cover（多值写法增强兼容） -
background-position: center center比单写center更明确，避免某些浏览器解析歧义 -
background-attachment: scroll—— 别用fixed，iOS 上极易导致滚动卡顿或背景图“粘住不动” - 想 fallback 到纯色？写成
background: #f0f0f0 url(...) no-repeat center center / cover，颜色必须放在url()前面，否则会被覆盖
内联 style 写背景图的三个硬伤
看似一行搞定：，但上线后大概率出问题。
- 路径是相对于 HTML 文件的，一旦 HTML 被移到子目录（比如从
/index.html移到/blog/post.html），路径就 404 - Webpack/Vite 构建后资源加了 hash，
bg.jpg变成bg.abc123.jpg，内联写死的路径完全失效 - 无法响应深色模式：
@media (prefers-color-scheme: dark)只能作用于 CSS，对内联样式无效 - 调试时你在 DevTools 的 Computed 面板里看到
background-image是none，其实是因为某条外部 CSS 用background: none覆盖了它——而你根本没意识到那条规则的存在
真正可靠的方案，是把所有背景逻辑收口到 CSS 文件里，用类名控制切换，用 @media 做降级，用构建工具别名管理路径。那些“先跑起来再说”的内联写法，后期维护成本远高于初期省下的几秒钟。
