body背景色不生效的主因是html和body未撑满视口，须设min-height: 100vh；纯色用background-color更安全，渐变或图片用background；深色模式用@media(prefers-color-scheme:dark)响应。
body背景色不生效？先检查是否漏了html高度
直接给 body 设 background-color 却看不到效果，大概率是 html 和 body 都没撑满视口。浏览器默认 body 是“内容高度”，不是“全屏高度”。
- 必须同时给
html和body设height: 100%或min-height: 100vh - 推荐用
min-height: 100vh，比height: 100%更稳妥——它不依赖父元素显式设高，且能随内容自然扩展 - 如果页面内容少，只设
body { background-color: #f0f0f0 }而没设html样式，背景色通常只覆盖内容区域，顶部/底部留白
用background还是background-color？看要不要贴图
background-color 只管纯色，安全、语义明确；background 是复合属性，能一并写颜色、图片、重复方式等，但容易覆盖掉你没声明的其他背景设置（比如 background-image）。
- 只要纯色：无条件选
background-color，避免意外清空已有背景图 - 要渐变或图片：用
background，例如background: linear-gradient(#fff, #eee)，但注意它会重置background-image、background-repeat等为默认值 - 想保险地叠加：用
background-color+background-image分开写，CSS 会自动合并渲染
全局背景色被子元素遮挡？z-index没用，得看层叠上下文
背景色本身在最底层，不会被 z-index 影响。如果你看到“背景不见了”，其实是子元素（比如带 background-color 的 div）盖住了它，或者父容器设置了 overflow: hidden 把背景裁掉了。
- 检查是否有子元素用了
position: relative+background-color，把整个可视区填满了 - 确认
html和body没被设成overflow: hidden或transform，否则可能创建新层叠上下文，导致背景渲染异常 - 移动端 Safari 有时对
100vh解析不准（地址栏收起/展开时），可改用100dvh（需检查兼容性）
深色模式下背景色怎么自动切换？别硬写两套CSS
用 @media (prefers-color-scheme: dark) 响应系统偏好，比 JS 切换更轻量、更可靠。
- 基础写法：
body { background-color: #fff; }<br>@media (prefers-color-scheme: dark) {<br> body { background-color: #1a1a1a; }<br>} - 注意：这个媒体查询只响应系统设置，不响应用户手动切换的“网站内深色开关”——后者得靠 class 切换 + CSS 自定义属性配合
- 如果用了 CSS 自定义属性（如
--bg: #fff），记得在媒体查询里也更新变量值，否则 JS 读取的仍是初始值
全局背景色看着简单，真正卡住人的地方就三样：高度没撑满、复合属性误覆盖、以及深色模式里变量没同步。别急着查“怎么设置背景”，先打开开发者工具，点一下 html 元素，看它的盒模型是不是真占满了视口。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
