html5已废弃body的bgcolor和background属性，必须用css的background-color或background-image实现；需同时设置html{min-height:100vh}和body{margin:0}才能确保全屏背景生效。
body 标签的 bgcolor 和 background 属性在 HTML5 中已彻底废弃，任何直接写在 或 里的值都不会生效，也不该再用。
为什么直接写 bgcolor 或 background 属性无效
这不是浏览器兼容问题，而是 HTML5 标准主动移除了这两个属性。现代 Chrome、Firefox、Safari 解析时会直接忽略它们，控制台可能报 Unknown property 'bgcolor' 或静默跳过。即使“看起来”有颜色或图片，也只是旧版浏览器容错渲染的偶然结果，无法保证跨设备/版本一致。更关键的是：CSS 的 background-color 或 background-image 规则优先级更高，会把 bgcolor 静默覆盖——你改了属性却没变化，大概率就是这个原因。
background-color 必须同时作用于 html 和 body
只写 body { background-color: #f0f0f0; } 常常不生效，尤其页面内容少时。因为 body 默认高度由内容撑开，没内容就只有几像素高，背景色只显一条细线。真正起效要：
-
html { min-height: 100vh; }—— 确保根容器至少占满视口 -
body { margin: 0; background-color: #f9f9f9; }—— 清除默认外边距（通常是 8px），显式设色 - 漏掉
html这一层，body的背景永远填不满全屏
background-image 要铺满全屏必须配齐四条规则
只写 background-image: url("bg.jpg"); 会导致图片平铺、拉伸变形、居中偏移或滚动时跟着动。可靠写法是：
-
min-height: 100vh（加在body上）—— 强制撑高，避免内容少时背景被截断 -
background-repeat: no-repeat—— 关闭平铺，否则小图变满屏马赛克 -
background-size: cover—— 等比缩放填满，不拉伸不变形（contain会留白，100% 100%会失真） -
background-position: center center—— 锚点居中，避免裁剪偏移 - 可选但推荐：
background-color: #222—— 图片加载失败或慢时的兜底色
注意路径以 HTML 文件所在目录为基准；用绝对路径最稳，比如 url('/assets/bg.jpg')。
移动端和 iOS 的 background-attachment: fixed 是个坑
想实现视差滚动效果？加 background-attachment: fixed 在 iOS Safari 和部分安卓 WebView 中会被禁用并回退为 scroll，导致背景错位或卡顿。真实项目中：
- 优先用默认
scroll行为，更稳定 - 若必须固定，得单独测试 iOS 15+ 和 Chrome Android 最新版
- 更稳妥的替代方案：用
position: fixed的<img>叠在最底层，z-index: -1
真正容易被忽略的是 html 元素的高度声明——漏掉它，body 的 100vh 就失去参照，后面所有设置都白搭。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
