直接写 background-color 不一定生效，因 body 默认高度由内容决定、未清 margin、易被 background 简写或父元素 overflow/clip-path 覆盖；需同时设 body{margin:0;min-height:100vh} 和 html{height:100%}，并优先用 CSS 而非废弃的 bgcolor 属性。
直接写 background-color 就行，但多数人卡在“写了没显示”——问题通常不在颜色值本身，而在高度塌陷、样式覆盖或简写误用。
为什么 body 设了颜色却只有一小块？
浏览器默认 body 高度由内容撑开，内容短时，背景色就只在内容区域生效，下方留白。这不是颜色没起作用，是容器没“撑满”。
- 必须同时给
html和body加min-height: 100vh（不是height: 100%，后者依赖父级高度） - 顺手清掉默认边距：
margin: 0; padding: 0;，否则body外围可能透出浏览器默认白边 - 别给
html设背景色——滚动条区域不继承它，容易底部露白；专注设body
background-color 值怎么选才不出错？
写法很多，但兼容性和用途差异大，选错会导致静默失效或旧浏览器不渲染。
-
#ff6b35：最稳，所有浏览器都认；三位简写如#f63只适用于#aabbcc类型可压缩的值（#abc→#aabbcc），#abcc是非法的 -
rgb(255, 107, 53)：适合 JS 动态拼接，但不支持透明；写错范围（如rgb(255, 107, 300)）整条声明会被浏览器丢弃，无提示 -
rgba(255, 107, 53, 0.7)：要半透背景必须用这个；注意 alpha 是 0–1 小数，不是百分比 -
hsl(14, 100%, 60%)：调色直观，但 IE9 及更早不支持；HSLA 同理，旧版 IE 完全忽略
为什么颜色“突然没了”？重点查这三处
浏览器不报错，但颜色消失往往是因为被覆盖、被重置或值非法。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
立即学习“前端免费学习笔记（深入）”；
- 被更高优先级样式覆盖：比如 Bootstrap 的
.bg-light或某些 CSS 重置中写了body { background: #fff; }——打开开发者工具的 “Computed” 面板，看最终生效的是哪条 - 误用
background简写：写了background: url(bg.png) no-repeat;，会把background-color重置为transparent，表面没动颜色，实际已清空 - 颜色值非法：比如
#ff6b3g（g不是十六进制字符）、rgb(255, 107, -10)（负值越界）——整条 CSS 声明静默失效
想叠加图片和底色，该怎么写？
可以共存，但顺序和写法决定是否可靠。
- 安全写法：分开写
background-color和background-image，例如：background-color: #f0f0f0; background-image: url("bg.png"); - 图片加载失败、透明区域或
no-repeat留下的空白，都会透出底色——这是设计行为，不是 bug - 绝对不要混用：先写
background-color: #eee;，再补一句background: url("bg.png");，后者会清空前者 - 如果坚持用简写，必须一次性写全：
background: #f0f0f0 url("bg.png") no-repeat center / cover;
真正难的不是写哪个值，而是确认 body 是否真有高度、有没有其他 CSS 在背后悄悄重置它、以及你用的写法是否在目标浏览器里被支持——这些细节一漏，颜色就“消失”得毫无征兆。
