应使用 background-color 而非过时的 bgcolor；支持十六进制、rgb、rgba、hsl 四种写法；优先写在外部 CSS 文件中；常见问题包括父容器无高度、样式被覆盖、background 简写重置颜色及色值错误。
直接用 background-color 设置就行，别碰 bgcolor —— 它是 HTML4 的过时属性，现代浏览器虽还兼容，但 W3C 已废弃，CSS 才是正解。
background-color 支持哪些写法？
四种主流写法，选哪种取决于你是否需要快速改、团队规范、或要透明度：
-
background-color: #ff6b35—— 十六进制最常用，简写（如#f63）也行，但注意不是所有颜色都能简写 -
background-color: rgb(255, 107, 53)—— 适合动态生成颜色（比如 JS 计算），但不支持透明 -
background-color: rgba(255, 107, 53, 0.7)—— 第四个参数是 alpha（0–1），要半透背景必须用这个 -
background-color: hsl(14, 100%, 60%)—— 调色更直观，但旧版 IE 不支持 HSLA
写在哪儿？内联、<style></style> 还是外部 CSS？
优先写在外部 CSS 文件里；临时调试可用 <style></style>；除非万不得已，别用内联 style：
- 内联：
<div style="background-color: #eee"> —— 覆盖力最强，但无法复用、难维护、JS 操作易出错 <li> <code><style></style>块：<style>body { background-color: #fff; }</style>—— 适合单页小项目或原型，但没缓存优势 - 外部 CSS：
body { background-color: #fff; }写在style.css里，再用<link rel="stylesheet" href="style.css">引入 —— 推荐，可缓存、可压缩、利于协作 - 父容器没高度，子元素设了背景也“看不见”——比如
div里只有浮动元素，得清浮动或设min-height - 被其他 CSS 覆盖了，比如 Bootstrap 的
.bg-light或重置样式表里的body { background: #fff; }，用浏览器开发者工具看“Computed”面板确认最终生效值 - 用了
background简写属性却漏写了颜色，比如background: url(bg.png) no-repeat;会把background-color重置为transparent - 颜色值拼错：写成
#ff6b3g（g 不是合法十六进制字符）或rgb(255, 107, 530)（超出 0–255 范围）—— 浏览器会整个声明忽略，不报错也不渲染
常见踩坑：为什么设了没反应？
不是代码写错，往往是层级或覆盖逻辑被忽略：
立即学习“前端免费学习笔记（深入）”；
配色本身没有标准答案，但背景色和文字色的对比度必须够——WCAG AA 级要求至少 4.5:1，用浏览器插件（如 axe DevTools）一测便知。真要调色，先定主色再用工具生成中性灰背景，比凭感觉试更稳。
