设 body 背景无效主因是高度不足、默认 margin 和层叠覆盖；需设 margin: 0、min-height: 100vh，优先用 html 背景控制视口，注意深色模式干预与 background 简写清空规则。
直接给 body 设 background-color 或 background-image 就能控制页面背景，但多数人卡在“设了没反应”或“只显示一小条”，根本原因是没处理好高度、继承和层叠优先级。
为什么只设 body { background-color: #fff; } 有时无效？
因为 body 默认高度由内容撑开，空页或内容短时，它可能只有几十像素高，背景色自然只占顶部一窄条；而浏览器默认给 body 留了 margin: 8px，这会进一步导致白边外露。
- 必须加
margin: 0;消除默认外边距 - 必须加
min-height: 100vh;（不是height: 100vh），否则内容超长时会被截断 - 如果用了 CSS 重置库（如 Normalize.css）或框架（如 Bootstrap），检查是否被
body { background: transparent; }覆盖 - 调试时先用高对比色验证范围：
background-color: hotpink;，确认铺满再换目标色
background-color 和 background 简写冲突怎么办？
一旦你写了 background: linear-gradient(...); 或 background: url(...) no-repeat;，它会**清空所有独立 background 属性**，包括之前设的 background-color —— 这不是 bug，是 CSS 规范行为。
- 想保留底色作 fallback，就用多层语法：
background: linear-gradient(rgba(0,0,0,0.2), rgba(0,0,0,0.8)), #222; - 避免混用：不要同时写
background-color: #333;和background: url(...);，后者会覆盖前者 - 渐变中若需透明度，优先用
rgba()而非opacity，后者会影响整个元素（含文字）
深色模式下背景色“失效”了？
不是失效，是 Safari/Edge 等浏览器在系统开启深色模式且页面未声明 color-scheme 时，会悄悄把 background-color: white 映射为浅灰，甚至反色文字——你写的样式没变，但渲染结果被干预了。
- 显式声明支持：
html { color-scheme: light dark; }（推荐放在的<style></style>中） - 避免依赖纯白/纯黑：
background-color: #fff在深色模式下可能被弱化，改用#f9f9f9或 CSS 变量配合@media (prefers-color-scheme: dark) - 注意
background-color: transparent会继承父级（html）背景，而html在深色模式下可能已被系统接管
真正容易被忽略的是：你设的背景到底作用在哪个盒子上。别只盯着 body，html 元素才是视口级容器，它的背景决定初始空白区域的视觉归属；而 body 的 margin、padding、min-height 组合，才决定内容区能否真正“顶天立地”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
