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 常常无效。必须显式清除默认背景和边框：
立即学习“前端免费学习笔记（深入）”；
1、数据调用该功能使界面与程序分离实施变得更加容易，美工无需任何编程基础即可完成数据调用操作。2、交互设计该功能可以方便的为栏目提供个性化性息功能及交互功能，为产品栏目添加产品颜色尺寸等属性或简单的留言和订单功能无需另外开发模块。3、静态生成触发式静态生成。4、友好URL设置网页路径变得更加友好5、多语言设计1)UTF8国际编码; 2)理论上可以承担一个任意多语言的网站版本。6、缓存机制减轻服务器
- 加
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 能兜住的。
