多重背景需用逗号分隔各图url及对应属性值，顺序严格一一对应；旧复合写法中background-position等全局生效易错位，新独立属性写法可精准控制每层位置、尺寸与重复方式。
background属性怎么写多个图片
直接用空格分隔，从前往后叠加，最前面的图在最上层。顺序反了就盖不住下面的图，这是最容易错的地方。
- 每个图片用
url()包裹，后面可跟位置、重复、尺寸等参数 - 所有图片共用同一组
background-position、background-repeat等，除非用新语法分开写 - 老写法（兼容 IE9+）：把所有参数按固定顺序拼成一串，比如
background: url(a.png) no-repeat top left, url(b.png) repeat-x bottom; - 新写法（推荐）：用独立子属性，如
background-image、background-position等，值用逗号分隔，一一对应
为什么background-position对多图失效
因为旧式复合写法里，background-position 只能写一次，它会同时作用于所有图——但你通常只想调某一张的位置。这时候必须改用独立属性写法。
- 正确做法：
background-image: url(top.png), url(bottom.png); background-position: center top, center bottom; - 错误写法：
background: url(top.png) center top, url(bottom.png);—— 后面那张没指定位置，会继承前一个center top，大概率错位 - 注意：逗号数量必须严格一致，
background-image有 3 个 URL，其他子属性也得是 3 个值，否则浏览器按“缺省补第一个”或“截断”处理，行为不统一
如何让某张背景图不缩放而另一张铺满
靠 background-size 单独控制每张图，但它只认逗号分隔的值列表，不能跳着写。想让第一张保持原始尺寸、第二张 cover，就得显式写出两个值。
-
background-size: auto, cover;—— 第一张按原尺寸，第二张拉伸填满 -
background-size: 100px 100px, contain;—— 第一张固定宽高，第二张等比缩放进容器 - 别写
background-size: auto;期望它只管第一张——它会尝试应用到全部，第二张就失去控制 - IE11 及以下不支持多值
background-size，如果要兼容，得用伪元素模拟第二张图
多重背景和伪元素哪个更靠谱
纯 CSS 多重背景足够用时，优先用它；只有遇到 background-blend-mode 不生效、或某张图需要独立事件（比如 hover 动画触发某一层变化）时，才考虑伪元素。
- 伪元素方案：用
::before叠一层background-image，主元素再叠一张，层级、定位、动画都更自由 - 但伪元素无法响应 pointer-events（除非加
pointer-events: auto;），且增加 DOM 节点，调试时容易混淆来源 - 多重背景在打印、截图、部分屏幕阅读器中行为更稳定；伪元素在移动端偶尔触发渲染 bug（尤其配合 transform 时）
background-image、background-position、background-size、background-repeat 四个属性的逗号列表——少一个值、多一个逗号，都可能让整组背景消失。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
