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 默认平铺（常需关掉）。
立即学习“前端免费学习笔记（深入）”；
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
-
background-image: url("img/bg.jpg");—— 引号可省，但含空格或特殊字符时必须加 -
background-size: cover;—— 等比缩放填满容器，可能裁剪 -
background-size: contain;—— 完整显示图片，可能留白 -
background-repeat: no-repeat;—— 几乎总是要加这一句
background 简写属性顺序不能乱
一次性写全背景样式，用 background 简写最省事，但顺序错一个，后面值就可能被浏览器忽略。标准顺序是：background-color background-image background-repeat background-attachment background-position（CSS3 新增 background-size 要紧挨 position 后，用斜杠分隔）。
比如 background: #fff url(bg.png) no-repeat fixed center / 100% auto; 中，center / 100% auto 是位置+尺寸组合，斜杠不能漏，也不能写成 center 100% auto（会被当三个独立 position 值解析）。
- 简写会重置所有背景相关属性，包括你没写的
background-clip、background-origin，有定制需求时慎用 - 如果只改图片不改颜色，别用
background简写，改background-image单独属性更安全 - 在 CSS 预处理器里用变量拼简写时，务必验证最终输出顺序
渐变背景用 background-image 写，不是 background-color
CSS 渐变本质是图像，必须走 background-image，哪怕它看起来像颜色。写成 background-color: linear-gradient(...) 是无效的，浏览器直接忽略。
兼容性要注意：老版 WebKit（Safari 5.1、iOS 6）需要 -webkit-linear-gradient 前缀；Firefox 3.6–15 也需 -moz-；现在基本可只写标准语法，但构建工具自动加前缀更稳妥。
-
background-image: linear-gradient(135deg, #ff9a9e, #fad0c4);—— 标准写法，角度+颜色停靠点 -
background-image: radial-gradient(circle at 20% 30%, #fff, transparent 70%);—— 径向渐变，注意at位置语法 - 多个渐变叠加？用逗号分隔：
background-image: linear-gradient(...), radial-gradient(...);
background 类属性看似简单，但图片路径、尺寸适配、透明通道、多层叠加、响应式断点下的行为差异，很容易在不同设备上露出问题。尤其 background-size: cover 在小屏上裁掉关键内容，或是 background-attachment: fixed 在 iOS Safari 上失效，这些细节比写法本身更值得花时间验证。 
