一、HTML 背景色设置的基础方法
直接在 CSS 中设置 background-color
background-color 是最直接的背景色设置手段，无需修改 HTML 结构即可实现页面背景的改变。通过为 body 或特定容器应用该属性，能够统一或分区地控制颜色呈现，提升页面的一致性和美观度。
颜色值的写法灵活多样，包括颜色名称、十六进制、RGB/RGBA、HSL/HSLA 等，便于在设计稿与实现之间快速映射。结合层级选择器，可以实现不同区域的不同背景色。
/***** 全局背景色 *****/
body {background-color: #fafafa;
}
在实际开发中，优先使用外部样式表或内部样式表来管理背景色，这样可以集中维护、便于主题切换和无障碍调整。直接在标签上使用内联样式会降低可维护性。
内联样式 vs 外部样式表
内联样式会提高局部权重，影响全局主题的统一性，在大规模项目中应尽量避免；优先将背景色放在外部样式表中，便于批量变更和版本控制。
通过选择器层级来控制区域背景色，比如对 header、main、footer 分别设置不同背景色，可以增强结构的可读性和视觉强调。
/***** 区域性背景色 *****/
header { background-color: #1a73e8; }
main { background-color: #ffffff; }
footer { background-color: #f1f3f4; }
通过 HTML 属性设置背景色的历史与局限
早期的 HTML 规范支持 bgcolor 属性，但该属性已被 CSS 取代，现代页面应避免直接使用。使用 bgcolor 可能影响可访问性、灵活性和响应式设计。
示例仅作历史对照，请以 CSS 实现为主；这样可以结合主题、对比度和媒体查询进行一致性控制。
<body bgcolor="white">内容区域
</body>二、通过变量与主题实现多背景色
使用 CSS 变量实现主题切换
CSS 自定义属性（变量）是实现主题切换的核心，通过定义全局变量来控制背景色，可以在不改变结构的情况下实现深色/浅色主题切换。
将背景色抽象为变量后，搭配数据属性或媒体查询，可以实现灵活的主题管理，并且具备更好的可维护性和可读性。
:root {--bg: #ffffff;
}
[data-theme="dark"] {--bg: #0b1020;
}
body {background-color: var(--bg);
}
引入 CSS 变量的局部作用域
变量不一定全局生效，可以在某些区域设定局部变量，从而实现区域自定义背景色或渐变效果，同时保留全局默认值。
通过自定义属性的命名和作用域设计，可以实现多主题并存的 UX 场景，例如在某个区域开启特定主题，以适配模块化的设计。
.panel {--bg: #f7f7f7;background-color: var(--bg);
}
结合 prefers-color-scheme 自动切换
媒体查询 prefers-color-scheme 提供了系统级主题感知，在用户偏好深色模式时自动调整背景色，提高无障碍体验。
结合 CSS 变量与媒体查询，可以实现无缝的系统主题同步，无需额外的脚本即可完成初始渲染颜色的一致性。
:root {--bg: #ffffff;
}
@media (prefers-color-scheme: dark) {:root { --bg: #111317; }
}
body { background-color: var(--bg); }
三、可访问性的配色方案与最佳实践
对比度和 WCAG 指南要点
良好的对比度是可访问性的重要组成部分，通常文本与背景之间应达到至少 4.5:1 的对比度（普通文本），确保内容对残障用户依然清晰可读。
在设计背景色时同时考虑截图、投影和昼夜环境，避免在深色背景上使用过于鲜亮的文本颜色，以免造成视觉疲劳。
/* 适配对比度的示例：确保文本对背景有足够对比度 */
.body-text { color: #1b1b1b; background: #ffffff; } /* 4.5:1 示例 */
为深色模式和浅色模式设计
深色模式的背景色通常更暗、对比度更高，文本颜色要相应提升亮度以维持可读性；浅色模式则需要避免过于刺眼的高饱和背景。
使用 CSS 变量结合主题切换，可以在两种模式间平滑切换，并通过渐变或微调来提升视觉舒适度。
:root {--bg: #ffffff;--fg: #0a0a0a;
}
[data-theme="dark"] {--bg: #0a0a0a;--fg: #eaeaea;
}
body {background-color: var(--bg);color: var(--fg);
}
四、实际案例与完整实现
简单背景色切换示例
下面给出一个简化的示例，演示如何通过 CSS 变量和一个按钮来切换背景色，适合在实际项目中快速搭建主题切换功能。
该示例关注结构清晰、实现可维护性，不依赖复杂框架，便于在任意前端项目中直接集成。
背景色切换示例
背景色切换演示
通过一个按钮切换主题，背景色随之改变。
响应式背景色策略
在响应式设计中，背景色不应仅仅依赖单一变量，而应结合屏幕尺寸、触控密度和环境光等因素进行动态调整，以保持视觉的一致性和舒适度。
结合媒体查询实现渐变或颜色深浅的自适应，能在不同设备上维持良好的对比度和可读性。
/***** 响应式背景色策略示例 *****/
@media (min-width: 768px) {:root { --bg: #f5f7fb; }
}
@media (max-width: 767px) {:root { --bg: #ffffff; }
}
body { background-color: var(--bg); }
