多值 background-image 必须严格用英文逗号分隔，顺序、配对、逗号缺一不可；各 background-* 属性值数量与顺序须完全对应；层级为声明逆序，最左图在顶层；IE11 不支持 / 复合语法，需降级书写。
直接用逗号分隔 url() 就能生效，但顺序写反、参数没配对、漏逗号这三处，90% 的失效都出在这儿。
background-image 多值必须严格用英文逗号分隔
浏览器只认英文逗号作为分隔符，多一个空格、少一个逗号、混入中文逗号，整条声明都会被丢弃——不是只忽略某张图，是整条 background-image 不解析。
- ✅ 正确：
background-image: url(logo.png), url(texture.jpg), url(overlay.svg); - ❌ 错误：
background-image: url(logo.png) url(texture.jpg);（空格 → 只取第一个） - ❌ 错误：
background-image: url(logo.png)，url(texture.jpg);（中文逗号 → 全失效）
调试时打开 DevTools 的 Computed 面板，看 background-image 是否显示为数组形式（如 url(...) , url(...)），否则就是语法卡在第一步。
每张图的位置、尺寸、重复方式必须一一对应
background-position、background-size、background-repeat 这些属性都支持多值，但值的数量和顺序必须跟 background-image 完全一致。缺一个，浏览器会按规则补默认值（比如 background-repeat: no-repeat; 只影响第一张，后面两张仍 repeat）。
- ✅ 安全写法：
background-image: url(a.png), url(b.jpg); background-position: top right, center; background-size: 48px, cover; background-repeat: no-repeat, repeat-x; - ❌ 危险写法：
background: url(a.png), url(b.jpg); background-position: center;（第二张图也变成center，大概率错位） - ⚠️ 注意：
background-size: auto, cover;比background-size: cover;更可控——显式写出每个值，避免继承干扰
层级顺序是“声明顺序的逆序”，最左边的图在最上层
这不是直觉问题，是规范行为：浏览器按 background-image 列表从左到右绘制，但后画的图盖住先画的，所以最左边的图视觉上在顶层。想让 logo 浮在纹理上，就得把 logo 写前面。
- ✅ 要 logo 在上：
background-image: url(logo.png), url(texture.jpg); - ❌ logo 被盖住：
background-image: url(texture.jpg), url(logo.png); - ? 调试技巧：临时加
background-color: rgba(255,0,0,0.1);，半透明色块能快速确认哪层在上、是否被遮挡
IE11 及更老浏览器对 / 语法支持差，需降级处理
现代写法喜欢用 url(a.jpg) top / 100px 100px 把位置和尺寸写在同一组里，但 IE11 对这种 / 分隔的复合语法兼容性极差，常导致整条 background 声明失效。
- ✅ 兼容写法（IE10+ 支持）：
background-image: url(a.jpg), url(b.png); background-position: top, center; background-size: 100px, cover; - ❌ IE11 高危写法：
background: url(a.jpg) top / 100px 100px, url(b.png) center / cover; - ⚠️ 补充：IE9 不支持多值
background-size，真要保 IE9，得用伪元素或linear-gradient模拟第二层
真正容易被忽略的是：所有背景图共用同一个 background-color，它只画在最底层图的下面；而任何一张图加载失败（404），那一层就透明，其余层照常渲染——别指望靠一张图挂掉来“兜底”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
