多背景图层顺序为逗号从左到右对应视觉从上到下；background-position等子属性需与background-image数量严格一一匹配，否则默认广播或截断；推荐拆分写法以提升可控性与兼容性。
直接用 background 复合属性写多个背景，逗号分隔，就能叠起来——但图层顺序、参数对齐、默认值覆盖这三处，90% 的人栽在这儿。
background 里逗号分隔的图层顺序怎么算
逗号前后的顺序 = 渲染上下顺序 = 视觉叠放顺序：最左边的图在最上层，最右边的图在最底层。它不看 z-index，也不看 DOM 顺序，只认这个逗号序列。
-
background: url(logo.png) no-repeat top left, url(texture.png) repeat;→logo.png盖在texture.png上面 - 想让渐变当底色、图标浮在上面？必须把渐变写在后面，图标写在前面
- 误以为“后写的在上”——这是 HTML 元素叠加的直觉，CSS 多背景恰恰相反
为什么 background-position 只写一个值就错位了
因为 background-position 是独立属性，不是复合属性里的子项；它只接受一组值，浏览器会把它“广播”给所有背景图——除非你显式用逗号分隔多组值，一一对应。
- 错误：
background: url(a.png) no-repeat, url(b.png); background-position: center;→ 两张图都居中，b.png被挤到同一位置，可能完全看不见 - 正确：
background-image: url(a.png), url(b.png); background-position: top right, bottom left; - 漏写某一层的
background-size？那一层按auto渲染，常缩成一个小点或拉伸变形 - 所有支持多值的背景子属性（
background-position、background-size、background-repeat、background-origin、background-clip）都必须和background-image的 URL 数量严格一致
background 复合写法 vs 拆开子属性写法，选哪个
老式复合写法（background: url(...) no-repeat top, url(...) repeat-x bottom;）看着紧凑，但隐藏陷阱多；新式拆分写法（background-image + background-position 等）更可控，也更容易调试。
- 复合写法里，
background-attachment: fixed如果只写一次，会同时作用于所有图——但通常你只想固定某一张，其余随滚动 - 复合写法无法单独控制某张图的
background-origin，比如一张图想以 content-box 定位，另一张想用 border-box，只能拆开写 - IE11 及以下不支持多值
background-size，如果要兼容，复合写法也救不了——得退回到伪元素方案 - 现代项目优先用拆开写法，语义清晰、编辑安全、团队协作时不容易踩坑
真正容易被忽略的是：所有逗号分隔的值列表，浏览器不会报错也不会警告，它只是默默按规则“补首项”或“截断”，结果图层偏移、尺寸异常、重复失控——这些 bug 往往要靠肉眼比对才看得出来，而不是控制台报错提醒你。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
