CSS background支持多背景图，用逗号分隔，从左到右由上至下叠放；每张图可独立设置position/size（用/连接），颜色仅能设一次且置于末尾；需注意顺序、配对、兼容性及路径有效性。
background属性怎么写多个图片
CSS的background属性支持一次声明多个背景图，用逗号分隔，顺序从“上到下”叠放——最左边的图在最顶层，最右边的在底层。
常见错误是把多个background-image单独写，或者误以为要加!important覆盖；其实只要一条background或background-image就能搞定。
- 必须用逗号分隔，不能用分号或空格
- 每个背景可独立配位置、大小、重复方式，用
/分隔尺寸和位置（如cover / 100% 100%） - 颜色只能设一次，且必须放在最后（作为底层“垫底色”），例如：
background: url(a.jpg), url(b.png), #fff;
为什么图片顺序反了就看不见底层
多背景本质是图层堆叠，不是叠加混合。顶层图片如果用了background-size: cover且没留透明区域，会完全遮住下面的图——这不是bug，是设计行为。
典型场景：带纹理的按钮（图标+渐变+噪点图），或者响应式封面（主图+暗色遮罩+logo）。
立即学习“前端免费学习笔记（深入）”；
- 调试时用
background-color: rgba(255,0,0,0.2)临时给某一层加半透色，快速确认是否被盖住 - 避免对非顶层图使用
background-repeat: no-repeat却没设background-position——默认居中，可能偏出容器 - SVG或PNG带alpha通道的图才能透出下层；纯色JPG即使设
opacity也无效（opacity作用于整个元素，不拆分背景层）
background-position和background-size怎么配对
每个背景图的background-position和background-size必须按顺序一一对应，用/连接，且数量必须和图片数一致。
错误示例：background: url(a.jpg) 10px 20px, url(b.png); background-size: contain;——这里只写了一个contain，但有两个图，第二张图的size会回退到auto，常导致拉伸变形。
- 正确写法：
background: url(a.jpg) 10px 20px / 50px 50px, url(b.png) center / cover; - 如果某张图不需要调size，显式写
auto更安全，避免继承干扰 - 百分比值（如
50% 50%）是相对于容器，不是上一张图——这点容易误判布局逻辑
兼容性与性能要注意什么
所有现代浏览器都支持多背景，IE9+也支持，但IE9不支持background-size的多值写法（比如cover / 100% 100%会整体失效）。
性能上，多背景本身不触发重绘，但每张图都是独立HTTP请求或内存占用；移动端慎用多张高清图拼合成“伪动效”。
- 检查
background-image是否含无效路径——某一张404会导致整条background声明被忽略（部分旧版Chrome） - 用
background-clip或background-origin调整裁剪区时，它们是全局生效的，不能为单个背景单独设置 - 动画仅支持
background-position和background-size（且需配合transition），其他属性无法过渡
真正麻烦的是当某张背景需要响应式切换（比如横屏换图），这时得靠媒体查询重写整条background，而不是只换其中一张——顺序、参数、颜色都得同步对齐，漏一个就错层。
