CSS 背景颜色：实用写法与示例

元素需要纯色填充时应使用 background-color。简写属性 background 也能设置颜色，但会同时重置背景图片等属性，所以局部修改时显式属性更安全。

.card {
  background-color: #f5f5dc;
  color: #1f2937;
}

可以在 米色色值页 中寻找温暖的表面色和现成色阶。

透明背景

RGBA、现代 RGB 语法和八位十六进制都能携带 Alpha：

.overlay {
  background-color: rgb(0 128 128 / 72%);
}

.overlay-hex {
  background-color: #008080b8;
}

透明色没有唯一的最终外观，浏览器会把它与下方颜色合成。使用 颜色透明度计算器 可比较它在白色、黑色和实际页面背景上的结果。如果设计稿提供八位 Hex，十六进制转 RGB 会明确显示 Alpha 通道。

按角色定义表面色

使用 --surface-page、--surface-card 和 --surface-accent，不要让变量名绑定某个字面颜色。这样更容易切换主题，也更容易审计文字、边框和焦点环的对比度。

最终检查必须基于真实合成后的表面。接下来可继续学习 链接与 placeholder 颜色，这些低强调文字和交互状态需要更多关注。