background-color用于纯色背景，轻量兼容；background-image配合size/position控制图片背景；background简写需严格按顺序；渐变必须用background-image而非color。
background-color 直接设纯色背景最常用
多数页面头部、按钮、卡片的背景都是单色，background-color 是最轻量、兼容性最好的写法。它不触发重排，性能好，IE6 都支持。
常见错误是误用 color（控制文字色）去改背景，或者漏写单位（纯色值其实不需要单位，但别和 background-position 混淆）。
-
background-color: #f0f0f0;—— 十六进制，推荐用 3 位或 6 位写法 -
background-color: rgba(0, 0, 0, 0.1);—— 带透明度，注意老 IE 不支持 -
background-color: transparent;—— 显式声明透明，比留空更可靠
background-image 配合 background-size 控制图片背景
轮播图容器、登录页全屏背景、图标按钮，都靠 background-image。但单独写它往往没效果——必须配合 background-size、background-position 才能按预期显示。
容易踩的坑：图片路径写错（相对路径以 HTML 文件为基准）、没设宽高导致容器塌陷、background-repeat: repeat 默认平铺（常需关掉）。
立即学习“前端免费学习笔记（深入）”；
