CSS多背景图需用逗号分隔多个url()值，图层从前到后叠加，且background-repeat、position等属性必须一一对应配齐，否则整条声明失效或错位。
多个背景图如何用 background-image 一次性设置
HTML 元素本身不支持多背景，真正起作用的是 CSS 的 background-image 属性——它允许用逗号分隔多个图像值，从前往后叠放（最前面的在顶层）。浏览器按顺序渲染，后面的图会透出到前面图的透明/空白区域。
- 语法必须严格：每个 URL 用
url("...")包裹，逗号后可加空格但不能换行（否则部分旧版浏览器解析失败） - 只写
background-image不够，必须配套设置background-repeat、background-position等，且各值也需用逗号对齐顺序 - 示例：
div { background-image: url("pattern1.png"), url("pattern2.png"); background-repeat: repeat, repeat-x; background-position: top left, bottom right; }
平铺模式 mismatch 导致某层不显示的典型原因
最常见的问题是 background-repeat 值数量和 background-image 不匹配。浏览器会截断或重复填充，造成某张图被强制设为 no-repeat 或完全失效。
- 如果写了 3 张图，但只写了 2 个
repeat值，第三个会被忽略或 fallback 到默认值（通常是repeat） -
background-size和background-position同理，必须一一对应，缺一不可 - 调试技巧：临时把每张图设为不同纯色 PNG（如 red.png / green.png），肉眼就能看出哪一层没生效
IE11 及更老浏览器不支持多背景怎么办
IE10+ 支持标准多背景语法，但 IE9 及以下完全不识别逗号分隔写法，会直接丢弃整条 background-image 声明。没有优雅降级方案，只能妥协。
- 用伪元素
::before或::after叠加一层额外背景（仅限单额外层，再多就嵌套爆炸） - 放弃老 IE，通过
@supports (background-image: url()) and (background-image: image-set(""))做特性检测后加载多背景样式 - 切记：不要用
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader，它不支持平铺，且阻塞渲染
性能隐患：多图平铺时 layout thrashing 风险
每增加一个平铺背景，浏览器就要多做一次纹理采样和合成计算。尤其当 background-size 设为 contain 或 cover 时，每次容器尺寸变化都会触发重绘。
立即学习“前端免费学习笔记（深入）”；
- 避免对高频变动元素（如滚动中 div、动画中按钮）使用多平铺背景
- 优先用单张大图拼接（CSS Sprite），比多个小图平铺更省 GPU 资源
- 若必须多图，确保所有图都是小尺寸（≤ 32×32px）、无 alpha 通道的 PNG 或 WebP
background-origin 和 background-clip 的默认行为——它们会影响平铺起点和裁剪范围，尤其在带 padding 的容器里，一张图可能被 pad 挡住一半。调的时候得把这两个属性显式写上，别依赖浏览器默认。 
