合理设置背景与文字颜色可提升网页美观度和可读性。使用 background-color 属性设置元素背景色，支持颜色名称、十六进制、RGB、HSL 等格式，常用于 body 或局部区域；通过 color 属性定义文本颜色，同样支持多种颜色表示法，需确保与背景有足够对比度以保障可读性；推荐深色文字配浅色背景，避免高饱和对比，借助工具选择协调配色，并遵循 WCAG 对比度标准（至少 4.5:1），以实现良好用户体验。
在网页设计中，合理设置背景颜色与文字颜色不仅能提升页面美观度，还能增强可读性和用户体验。CSS 提供了简单直接的方式来控制这些颜色属性。
设置背景颜色
使用 background-color 属性可以为元素指定背景色。常见的颜色值表示方式包括颜色名称、十六进制值、RGB 和 HSL。
例如：- background-color: white; — 使用颜色名称
- background-color: #ffcc00; — 使用十六进制（这里是金色）
- background-color: rgb(255, 0, 0); — 红色
- background-color: hsl(120, 100%, 50%); — 绿色（HSL 格式）
通常建议将背景色应用于 body 元素来设置整个页面的底色，也可以用于按钮、卡片等局部区域。
设置文字颜色
通过 color 属性来定义文本的颜色。它的用法和 background-color 类似，支持相同的颜色表示方法。
立即学习“前端免费学习笔记（深入）”；
- color: black; — 黑色文字
- color: #333; — 深灰色，常用于正文提高可读性
- color: rgba(0, 0, 0, 0.7); — 半透明黑色，适合叠加在复杂背景上
注意：文字颜色需与背景形成足够对比，确保在不同设备上都能清晰阅读。
配色搭配建议
良好的配色能显著提升视觉效果。以下是一些实用建议：
- 深色文字配浅色背景：如黑字白底，最常见且易读
- 避免高饱和度对比：如红字绿底，容易造成视觉疲劳
- 使用工具辅助选择：可借助在线配色工具（如 Adobe Color）生成协调的配色方案
- 考虑无障碍访问：确保颜色对比度符合 WCAG 标准（一般建议对比度至少 4.5:1）
基本上就这些。掌握 background-color 和 color 的基本用法后，结合合理的配色原则，就能快速打造清晰美观的网页样式。不复杂但容易忽略细节。
