多层背景图需用逗号分隔的单条background-image声明，如background-image: url(a.png), url(b.png)；各层background-position、background-size等属性须严格对应层级顺序，缺一或错位将导致渲染异常。
background-image怎么写多个值才生效
多层背景图不是靠多次写 background-image 覆盖实现的，必须用逗号分隔的值列表一次性声明。浏览器从左到右渲染，左边的图在最上层，右边的在底层。
- 错误写法：
background-image: url(a.png); background-image: url(b.png);—— 后者会完全覆盖前者 - 正确写法：
background-image: url(a.png), url(b.png); - 每层可独立配位置、尺寸、重复方式，用对应属性的逗号列表一一对应，比如
background-position: top left, center; - 如果某层没指定
background-size，默认是auto auto，可能拉伸失真，尤其当容器宽高比和图片不一致时
各层background-size怎么配才不打架
background-size 必须和 background-image 层级严格对齐，缺一个或顺序错就会错位，底层图可能被裁掉或留白。
- 三层图就得写三个
background-size值，例如：background-size: 100% 100%, cover, contain; - 用
cover的层会等比缩放填满容器，但可能裁边；contain保证全显但可能留空；100% 100%是强制拉伸，慎用 - 如果某层只设宽度（如
100px），高度自动按原图比例推算，但前提是该层background-image已定义且能加载——否则整条声明可能被忽略
伪元素叠加背景图比多层background更可控吗
是的，当某层需要响应式隐藏、动画或单独 z-index 控制时，用 ::before/::after 更稳。
- 多层
background-image共享同一盒模型，无法单独显示/隐藏某一层 - 伪元素可以加
opacity、transform、transition，而背景图本身不支持这些 - 注意：伪元素需设
content: ""和定位（如position: absolute），否则不渲染；父容器得是relative - 性能上差别不大，但伪元素多了 DOM 节点，过度嵌套可能影响重排
IE11及以下不支持多层背景图怎么办
IE11 支持逗号分隔的 background-image，但 IE10 及更早版本完全不认——直接忽略整条声明，回退到单层或纯色。
- 检测方法：用
@supports (background-image: url(a), url(b))写 CSS 特性查询做降级 - 务实做法：主背景用单图或渐变，装饰性图层用伪元素 + 条件注释或 JS 检测后插入 class
- 别依赖
background-blend-mode配合多背景，它在 IE 全系不可用，且 Safari 旧版有渲染 bug
多层背景看着简单，实际容易栽在尺寸对齐、IE 兼容、以及“以为写了两行 background-image 就是两层”这种直觉错误上。最稳妥的是先写死一层，再加第二层并同步调所有逗号列表属性，边改边看渲染结果。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
