HTML中设置背景色最直接的方式是使用style属性中的background-color，如<div style="background-color: #ff6b6b;">内容</div>；需避免使用已废弃的bgcolor属性，注意background简写会重置其他背景属性，响应式适配应优先用CSS媒体查询而非内联样式。
HTML里改背景色，style属性最直接
不用动CSS文件，也不用写外部样式表，直接在标签上加style就能生效。比如给一个<div>设背景色：<div style="background-color: #ff6b6b;">内容</div>。注意必须写全background-color，只写background可能被其他值覆盖（比如后面加了background: url(...) no-repeat;就会清掉颜色）。
常见错误是写成bgcolor="#ff6b6b"——这是HTML4的老写法，现代浏览器虽还兼容，但W3C已废弃，校验通不过，也不支持渐变或透明度。
-
background-color接受十六进制（#rrggbb、#rgb）、rgb/rgba（rgba(255, 107, 107, 0.8)）、英文名（tomato）等多种格式 - 用
rgba()时第四个参数是透明度（0–1），比opacity更安全：它只影响背景，不连带子元素一起变透明 - 如果父容器没设高度，又只给子元素设了背景色，可能“看不见”——因为父容器高度塌陷，得确保父级有内容、高度或
min-height
内联样式 vs <style>标签，什么时候该选哪个
临时调试、服务端动态生成单个元素、或者框架里用v-bind:style（Vue）或style={{}}（React）时，用style属性没问题。但只要涉及多个元素共用同一种背景、或需要响应式变化（比如暗色模式切换），就得抽到<style>块或外部CSS里。
比如这段代码看着省事，其实难维护：<p style="background-color: #e0e0e0;"></p><div style="background-color: #e0e0e0;"></div>。一旦要改色，得逐个找，还容易漏。
立即学习“前端免费学习笔记（深入）”；
- 用
<style>标签时，优先用类名（.bg-subtle { background-color: #f5f5f5; }），别直接选标签（如div { background-color: ... }），避免全局污染 - 如果项目已用CSS预处理器（Sass/Less），把常用背景色定义成变量，比如
$bg-light: #f9f9f9;，后续改一处，全站同步 - 行内
style的优先级高于<style>里的规则，调试时看到样式被覆盖，先检查有没有意外的style属性在捣鬼
background简写属性容易踩的坑
很多人图快写background: #fff;，以为只是设背景色——但它其实是background-color、background-image、background-repeat等所有背景相关属性的简写。只要用了background，没显式写出的部分就会重置为默认值。
典型问题：你先写了div { background: #eee; }，后来想加个背景图，只补一句div { background-image: url("bg.png"); }，结果颜色没了——因为background-image单独写不会继承前面的background色，它只管自己那部分，其余全按浏览器默认来（background-color: transparent）。
- 安全做法：要么全用简写（
background: #fff url("bg.png") no-repeat center;），要么只用background-color和background-image分开写，并确保两者都存在 - 想保留原有背景图只调色？不能只改
background-color，得用background: #fff url("bg.png") no-repeat center / cover;完整重写 - 渐变背景必须用
background简写，因为background-color不支持linear-gradient()
深色模式下背景色怎么自动适配
纯靠JS监听prefers-color-scheme再手动切class太重，现代方案是直接用CSS媒体查询：@media (prefers-color-scheme: dark) { .card { background-color: #2d2d2d; } }。前提是你的基础色本身是中性灰（比如#ffffff和#121212），别用高饱和色当背景，否则在深色模式下会刺眼。
容易忽略的一点：系统切换深色模式时，页面不会自动重载，但CSS媒体查询是实时响应的——所以只要写对了，无需JS干预。但如果你用style属性硬编码了背景色（比如style="background-color: white"），媒体查询就完全失效了。
- 测试时别只看浏览器开发者工具里的模拟开关，真机切系统设置更可靠（iOS/Android 设置→显示→深色模式）
- 用
background-color: Canvas;或background-color: CanvasText;这类系统语义色，能随系统主题自动变，但兼容性略差（iOS Safari 16.4+才支持Canvas） - 如果用CSS变量（
--bg-primary: #fff;），记得在媒体查询里也重定义变量值，而不是只改选择器下的属性
