body 背景色无效主因是被重置样式覆盖或优先级不足，需检查开发者工具中的样式层叠、补充 html 作用域、清除 margin 并确保高度占满视口。
background-color 写在 body 上但没效果？检查是否被重置样式覆盖
HTML 页面设了 body { background-color: #f0f0f0; } 却还是白底，大概率是浏览器默认样式或外部 CSS 把它干掉了。现代 CSS 框架（比如 Bootstrap）或重置库（如 normalize.css）常把 body 的 margin 和 background 都设为 transparent 或 unset，导致你写的颜色根本没机会生效。
实操建议：
- 打开开发者工具，选中
<body>元素，在 Styles 面板里搜background，看有没有带!important或更高优先级的规则把它盖住了 - 临时加一条更具体的声明：
html, body { background-color: #f0f0f0 !important; }—— 这不是长久解，但能快速验证是不是优先级问题 - 检查是否漏写了
html元素的背景：如果body高度不够（比如内容少），而html又没设背景，那空余区域就显示默认白底
用了 background-image 后 background-color 不见了？它不是“叠加”，而是“后备”
background-color 在有 background-image 时不会消失，但它只在图片加载失败、路径错误或图片完全透明时才露出来。很多人误以为它是图层叠加，其实它是“兜底色”——只要图片成功渲染，哪怕它是半透明 PNG，background-color 就彻底不可见。
常见错误现象：
立即学习“前端免费学习笔记（深入）”；
- 本地开发时路径写错（比如
url(img/bg.png)实际文件在assets/img/下），图片 404，结果看到的是background-color→ 容易误判“颜色生效了” - 用
background: url(...) no-repeat;覆盖了整个声明，没显式保留background-color→ 实际等价于background-color: transparent - 图片本身带 alpha 通道，且页面背景是白色，看起来像“颜色没起作用”，其实是图层混合效果
正确写法示例：background: #eef2f7 url("assets/img/texture.png") repeat; —— 这样颜色和图片同时存在，且颜色作为底层铺垫
设置 html 元素背景色后滚动时顶部/底部闪白？viewport 高度不足
当页面内容高度小于视口（viewport），又只给 html 设了背景色，滚动过程中会露出未被覆盖的区域。这是因为 html 元素默认高度由内容撑开，不是 100vh；而 body 默认有 margin，进一步加剧空白。
实操建议：
- 给
html加min-height: 100vh;，确保它至少占满一屏 - 清除
body默认外边距：body { margin: 0; }，否则 margin 会撑出额外空白 - 避免只设
height: 100vh—— 它会截断超出视口的内容，用户无法滚动到底部
CSS 自定义属性（CSS 变量）设背景色不生效？检查作用域和继承链
用 --bg-main: #4a5568; 定义变量后，background-color: var(--bg-main); 却无效，通常是因为变量没定义在当前选择器的作用域内，或者被更近的父级同名变量覆盖。
典型场景：
- 变量定义在
:root，但你在内联style属性里直接写var(--bg-main)→ 不支持，HTML 的style属性不解析 CSS 变量 - 组件级作用域（如 Vue 的
<style scoped>）里定义变量，但子组件没继承，导致var()返回initial（即透明） - 拼写错误，比如定义的是
--bg-main，却用了var(--bg-mainn)，浏览器静默忽略，退回到初始值
调试技巧：在开发者工具里把 var(--xxx) 改成硬编码值，看是否立刻生效 —— 如果生效，基本锁定是变量问题
最常被忽略的一点：背景色是否真的需要“全页面”生效？很多时候你以为要设在 html 或 body，其实只需要一个包裹容器（比如 <main>）加 min-height: 100vh; 和背景色，语义更清晰，也避开重置样式干扰。
