html背景颜色代码怎么写_html网页背景色设置方法【配色】

应使用 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）一测便知。真要调色，先定主色再用工具生成中性灰背景，比凭感觉试更稳。