background属性可缩写8个子属性，但background-blend-mode不参与；语法中background-size必须紧跟background-position并用/分隔；多背景图用逗号分隔，color只能位于最后一层末尾。
background 属性到底能写哪些值？
它不是单一属性，而是所有背景相关属性的**缩写总控**，一次声明就能设置多个视觉层。主流浏览器（包括 IE9+）都支持，但 IE8 及更早版本不支持多背景图。
可缩写的子属性共 8 个：background-color、background-image、background-position、background-size、background-repeat、background-origin、background-clip、background-attachment。其中 background-blend-mode 不参与缩写。
语法顺序灵活，但有两条硬规则：
-
background-size必须紧跟在background-position后面，且两者用/分隔，例如center / cover -
background-origin和background-clip若只写一个值（如padding-box），会同时作用于二者；写两个值（如content-box padding-box）则前者是 origin，后者是 clip - 多个背景图用英文逗号
,分隔，从左到右为“上层→下层”，background-color只能出现在最后一个背景层末尾（因为颜色是统一的底层）
最常用组合怎么写才不翻车？
日常开发中，90% 的需求靠 4–5 个值就能搞定，写太多反而难维护。推荐优先使用缩写，但别堆满全部 8 个值。
立即学习“前端免费学习笔记（深入）”；
典型安全写法示例：
background: #fff url("bg.jpg") center/cover no-repeat;
这行等价于：
background-color: #fffbackground-image: url("bg.jpg")background-position: centerbackground-size: coverbackground-repeat: no-repeat- 其余未写的属性（
origin、clip、attachment）取默认值：即padding-box、border-box、scroll
容易踩的坑：
- 漏掉
no-repeat→ 图片默认平铺，页面突然变“花” - 写
center cover但没加/→ 浏览器无法解析，整条background声明失效 - 在多背景中重复写
background-color→ 只有最后一个生效，前面的被忽略 - 用
fixed时没注意父容器是否有transform或perspective→ 导致 fixed 失效（这是 CSS 渲染层的隐性规则）
background-size: cover 和 contain 到底差在哪？
这不是“哪个更好”，而是“解决什么问题”。选错会导致图片被裁剪或留白，尤其在响应式布局里特别明显。
-
cover：缩放图像直到完全覆盖容器，**保证无留白**，但可能裁掉上下或左右部分内容 -
contain：缩放图像直到完全可见，**保证全图显示**，但容器内可能出现背景色露出（即留白） -
100% 100%：强制拉伸填满，**会变形**，慎用，仅适合图标类小图或设计明确要求拉伸的场景
实战建议：
- 全屏 Banner 图 → 用
cover，牺牲边缘保气势 - 证件照/产品图展示区 → 用
contain，确保关键内容不被切 - 需要精确对齐某像素点（比如 logo 角标）→ 改用具体长度值，如
200px 120px，再配合background-position微调
多背景图怎么分层控制？
CSS 允许在一个元素上叠 2～N 层背景，比如「渐变底色 + 纹理图 + 图标」，但必须理解层叠逻辑和属性绑定规则。
每层背景之间用逗号分隔，每层内部仍遵循缩写语法。例如：
background:
linear-gradient(135deg, rgba(0,0,0,0.2), transparent),
url("pattern.png") left top/20px 20px repeat,
#f0f0f0;
关键点：
- 第一层（渐变）在最上，最后一层（
#f0f0f0）在最下，也是唯一能设纯色的地方 - 纹理图那层单独写了
repeat和size，它不会影响上面的渐变或下面的颜色 - 各层的
background-position、background-size等必须一一对应，不能跨层复用 - IE8 不支持该写法 → 如需兼容，得降级为单背景 + 伪元素模拟多层
