多层背景图片叠加必须严格遵循顺序、配对、语法三原则：background-image多值须用英文逗号分隔，各图需一一对应设置position/size/repeat，绘制顺序为从左到右、从上到下（最左在顶层），任一错误将导致整条声明失效。
多层背景图片能叠加，但顺序、配对、语法三处一错就全失效。
background-image 多值必须用英文逗号分隔
浏览器只认英文逗号，空格、中文逗号、分号都会导致整条 background-image 声明被忽略——你可能只看到第一张图，或干脆黑屏（回退到透明背景）。
- 正确：
background-image: url(logo.png), url(texture.jpg), linear-gradient(to bottom, #000, transparent); - 错误：
background-image: url(logo.png) url(texture.jpg);（空格 → 只解析第一个） - 错误：
background-image: url(logo.png)，url(texture.jpg);（中文逗号 → 整条丢弃）
调试时打开 DevTools 的 Computed 面板，检查 background-image 是否真的显示为三行值；如果只有一行，说明语法已失效。
每张图的位置、尺寸、重复方式必须一一配对
background-position、background-size、background-repeat 都支持逗号分隔的多值，但数量和顺序必须跟 background-image 完全一致。漏一个值，浏览器会按规则补缺省（比如把 no-repeat 只给第一张，后面两张仍 repeat），结果就是纹理铺满整个页眉、SVG图标缩成小点。
立即学习“前端免费学习笔记（深入）”；
- 想让第一张居右上、第二张平铺底边、第三张渐变铺满：
background-position: right top, center bottom, center center; - 想让 SVG 固定 48×48、纹理高 2px、渐变 cover：
background-size: 48px 48px, auto 2px, cover; - 只写
background-repeat: no-repeat;？那只有第一张不重复，后两张默认repeat
别混用简写和独立属性：写了 background: url(a.png), url(b.png); 后再单独设 background-position: center;，等于强行让两层都居中，失去分层控制力。
绘制顺序是「从左到右、从上到下」，不是数组索引直觉
声明列表里最左边的图在最顶层，最右边的在最底层——这点反直觉，但决定遮挡关系。比如你要在主图上加文字遮罩，就得把遮罩图写前面，主图写后面：
- 正确（遮罩在上）：
background-image: url(mask.png), url(hero.jpg); - 错误（主图盖住遮罩）：
background-image: url(hero.jpg), url(mask.png);
linear-gradient() 也计入图层数，它没有像素尺寸，所以 background-size: cover, 100% 200px 对渐变无效；想控高度，得靠 background: linear-gradient(), url() ; background-size: auto, cover; 这种简写组合才稳。
IE11 及更老浏览器的兼容性陷阱
IE10+ 支持多背景，但 IE11 对 / 语法（如 url(a.png) no-repeat top / 100px）解析极不稳定，常整条失效；background-size 多值也容易被忽略。
- 降级方案：改用伪元素模拟第二层（
::before叠一张图），主元素留一张，z-index显式控制 - 避免依赖
background-blend-mode—— IE11 不支持，且它会让所有图层参与混合，发灰不是 bug 是行为 - 路径错误或资源 404 时，那一层变透明，不影响其他层；但若整条
background简写因语法错而失效，就全没了
真正难的不是写出来，而是哪一层没加载、哪一逗号少打、哪一值顺序偏移了一位——这些细节在响应式断点切换或动态插入样式时最容易暴露。
