颜色与背景

color 设置前景（多为文字）色；background-* 设置元素背景（颜色、图像、渐变）。二者共同决定对比度与视觉层次，直接影响 无障碍 阅读体验。排版中的文本颜色用法见 排版与文本。

颜色（color 与 <color> 类型）

常用表示法

h1 {
    color: #333;
}
p {
    color: rgb(0 0 0 / 0.8);
}
.box {
    color: blue;
    border: 2px solid currentColor;
}

rgba() / hsla() 仍广泛支持；新代码可优先 rgb() / hsl() 的 斜杠 alpha 写法。

背景属性

分项属性

background-size

• cover：保持比例铺满，可能裁剪。
• contain：完整显示图片，可能留白。
• 双值：如 100% auto。

简写 background

多层背景用逗号分隔；单层常见写法：

.hero {
    background: #f0f0f0 url("bg.jpg") no-repeat center / cover;
}

position 与 size 用 / 连接，如 center / cover。background-color 只能写在最后一层（规范要求）。

透明度

.panel {
    background-color: rgb(255 0 0 / 0.5);
}

渐变（属于 background-image）

线性渐变

.gradient {
    background: linear-gradient(to right, red, blue);
    background: linear-gradient(45deg, red, orange, yellow);
}

径向渐变

.radial {
    background: radial-gradient(circle at center, white, black);
}

可用 conic-gradient 做锥形渐变。渐变由浏览器实时绘制，通常比大图更省带宽。

配色方案（color-scheme）

在根或容器上声明 color-scheme: light dark，告知用户代理页面支持浅色与深色；表单控件、滚动条等会使用对应默认样式。与 light-dark()、prefers-color-scheme 媒体查询可组合实现主题切换。

:root {
    color-scheme: light dark;
    background: light-dark(#fff, #121212);
    color: light-dark(#222, #f0f0f0);
}

可访问性与性能

对比度（WCAG 2）

• 正文文字与背景：对比度建议 ≥ 4.5:1。
• 大号字（约 ≥ 18px 常规或 ≥ 14px 粗体）：≥ 3:1。
• 不要仅靠颜色传达状态（需配合图标、文案）。

实践建议

• 纯色背景用 background-color，勿用 1×1 图片。
• 有背景图时仍设 fallback 背景色，图片失败时文字可读。
• 响应式图：可用 image-set() 按分辨率切换，或与 <picture> 配合。
• 移动端大背景 fixed 慎用，易卡顿。

.card {
    color: #333;
    background-color: #f4f4f4;
    background-image: url("pattern.png");
    background-position: center top;
    background-size: contain;
    background-repeat: no-repeat;
    border: 1px solid rgb(0 0 0 / 0.1);
}

总结

• 颜色：掌握 hex、rgb()/hsl() 与 alpha、currentColor；新特性了解 oklch、color-mix。
• 背景：分清 cover/contain、简写中 / 的含义、clip/origin。
• 透明：优先带 alpha 的颜色，慎用整元素 opacity。
• 无障碍：保证对比度，背景图加 fallback 色。

参考文献

以下链接在编写时均可正常访问：