background-color可设纯色或透明，半透明须用rgba/hsla；background简写会覆盖background-color；表单元素需清除默认样式；背景与文字对比度须≥4.5:1。
background-color 能直接设颜色，但别漏掉透明场景
设置背景色最常用的是 background-color 属性，它接受颜色关键词、十六进制、RGB/RGBA、HSL/HSLA 等值。关键点在于：如果需要半透明效果，必须用 rgba() 或 hsla()，而不是在 opacity 上做文章——后者会让整个元素（包括文字）一起变透明。
-
background-color: #ff6b35;—— 纯色，无透明 -
background-color: rgba(255, 107, 53, 0.8);—— 80% 不透明度，仅影响背景 -
background-color: transparent;—— 显式声明透明，比留空更可靠
background 和 background-color 混用时会覆盖
当同时使用 background 简写属性和 background-color 时，background 会重置所有背景相关子属性（包括颜色），导致后写的 background-color 失效。这是调试时常见的“设了没反应”原因。
div {
background-color: #4a90e2;
background: linear-gradient(to right, #4a90e2, #50e3c2); /* 覆盖上面的 color */
}正确做法是：要么全用 background 简写（把颜色作为第一项），要么只用 background-color 配合其他独立属性如 background-image。
button、input 等表单元素的背景色可能被用户代理样式覆盖
浏览器对 button、input[type="submit"] 等有强默认样式（比如 Chrome 的灰色渐变），直接设 background-color 常常无效。必须显式清除默认背景和边框：
立即学习“前端免费学习笔记（深入）”；
- 加
border: none;防止边框压住背景 - 加
background: none;或background-color: #007bff;并确保没有其他background简写干扰 - 必要时加
-webkit-appearance: none;（Safari/Chrome）或appearance: none;移除原生样式
颜色可访问性容易被忽略：对比度不够文字就看不清
设完背景色后，务必检查前景色（如文字）与它的对比度是否 ≥ 4.5:1（普通文本）。工具如 Chrome DevTools 的无障碍面板能自动标出不合规组合。例如：
/* 危险组合：浅灰背景 + 灰字 */
.text-box {
background-color: #f5f5f5;
color: #999; /* 对比度仅 ~2.3:1 */
}解决方式不是调亮文字就是压暗背景，或者换用 WCAG 合规的配色方案（如 #007bff 搭配白字）。
真正麻烦的是动态内容——比如用户上传图片作背景时，没法预知主色调，这时候得靠 JS 计算明度再切文字色，不是单靠 CSS 能兜住的。
