多重背景必须用英文逗号分隔url，且background-position、size、repeat等属性值数量和顺序须严格对应；首图在最上层；复合简写易错位，推荐拆分书写。
直接用 background-image 塞多个 url()，用英文逗号分隔，再配齐对应位置、尺寸、重复方式——不是“写了就行”，顺序错一位、少一个逗号、中英文标点混用，整条声明就失效。
background-image 多图必须用英文逗号分隔
浏览器只认严格逗号分隔的列表。空格、换行、中文逗号都会让整条 background-image 被丢弃，回退到无背景或默认色（常表现为全黑或纯白）。
- ✅ 正确：
background-image: url(logo.png), url(texture.jpg), url(gradient.svg); - ❌ 错误：
background-image: url(logo.png) url(texture.jpg);（空格 → 只解析第一个） - ❌ 错误：
background-image: url(logo.png)，url(texture.jpg);（中文逗号 → 整条无效） - ⚠️ 注意：复制粘贴时容易带入不可见 Unicode 逗号（如全角、零宽），建议手敲或用编辑器显示不可见字符功能核对
每个 background-* 属性都得按顺序一一对应
background-position、background-size、background-repeat 等属性支持多值，但值的数量和顺序必须与 background-image 中的 URL 数量完全一致。浏览器不会报错，而是静默补缺省或截断，导致某张图位置偏移、拉伸异常或意外平铺。
- 如果写了 3 张图：
background-image: url(a.jpg), url(b.png), url(c.gif); - 那
background-position: left top, center, right bottom;✅ 对应；background-position: left top, center;❌ 少一个 → 第三张用默认值0 0，大概率错位 -
background-repeat: no-repeat, repeat-x, no-repeat;✅ 各自控制；只写no-repeat❌ → 仅第一张生效，后两张仍为repeat - IE11 不支持多值
background-size，若需兼容，得降级用伪元素或 JS 动态 fallback
图层绘制顺序是「从左到右、从上到下」，最左边在最顶层
这和视觉直觉相反：你写的第一个 URL 在最上层，最后一个在最底层。很多人把底图放前面，结果文字遮罩被盖住，页面一片空白。
- 想实现「文字遮罩 > 渐变过渡 > 主图 > 底纹」效果，就得按这个逻辑从左往右写：
background-image: url(mask.png), linear-gradient(...), url(main.jpg), url(pattern.png); - 调试时可临时加
background-color: rgba(255,0,0,0.1);查看每层实际覆盖范围 -
z-index对多重背景完全无效——它们都在同一个背景层内，无法跨层干预 - 渐变（
linear-gradient）算作图像值，能参与堆叠，但不接受像素尺寸的background-size，只能用auto、cover、百分比等相对值
别用复合 background 简写混搭多图和单图参数
老式写法 background: url(a.png) no-repeat top, url(b.png) repeat; 看似简洁，但 background-position 和 background-repeat 在复合声明里只出现一次，会强制作用于所有图，极易错位。
- ❌ 避免：
background: url(top.png) center top, url(bottom.png);—— 第二张没指定位置，继承center top，可能跑出容器 - ✅ 推荐拆开写：
background-image: url(top.png), url(bottom.png); background-position: center top, center bottom; background-repeat: no-repeat, repeat; - 复合写法在 IE9+ 兼容性好，但可控性差；现代项目优先用独立属性写法，调试清晰、修改安全
- 如果某张图需要 hover 动画或事件响应（比如点击纹理切换），多重背景做不到——这时该换
::before/::after伪元素方案
最容易被忽略的是：所有子属性值数量必须严格对齐，且逗号不能少、不能错、不能混。浏览器不报错，但渲染结果往往无声无息地崩了——查 computed 样式里 background-image 是否为空，是最快定位问题的方式。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
