多重背景图最左url在最上层，background-position等属性值数量和顺序必须与background-image图层数严格一一对应，且仅认英文逗号分隔，否则整条声明静默失效或错位。
多重背景图的渲染顺序由 background-image 声明中 URL 的书写顺序决定，最左边的图在最上层，且所有相关属性（background-position、background-size、background-repeat）必须严格一一对应图层数量，否则会静默错位或失效。
background-image 多图声明必须用英文逗号分隔
浏览器只接受严格英文逗号（,）分隔的 URL 列表。任何空格、换行、中文逗号（、）、全角符号或零宽 Unicode 字符都会导致整条 background-image 声明被丢弃——你看到的“纯黑”“纯白”或“只剩一张图”，大概率是这个原因。
- ✅ 正确：
background-image: url(a.png), url(b.jpg), linear-gradient(black, transparent); - ❌ 错误：
background-image: url(a.png) url(b.jpg);（空格 → 仅第一张生效） - ❌ 错误：
background-image: url(a.png)，url(b.jpg);（中文逗号 → 整条无效）
复制粘贴时极易混入不可见字符，建议手敲，或在编辑器中开启「显示不可见字符」功能核对。
background-position / size / repeat 必须数量严格匹配
这些属性支持多值语法，但值的数量和顺序必须与 background-image 中的图层数完全一致。浏览器不会报错，而是静默补默认值（如 0 0、auto），结果常是某张图缩成小点、偏移出视区、或意外平铺盖住其他层。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 写了 3 张图：
background-image: url(top.svg), url(mid.jpg), url(base.png); - ✅ 正确：
background-position: center top, center, bottom center; - ❌ 错误：
background-position: center top, center;（少一个 → 第三张用默认0 0，大概率错位） - ✅ 推荐显式写出全部值，哪怕相同：
background-repeat: no-repeat, no-repeat, repeat;
图层顺序是“先写的在上”，不是“后写的盖前面”
这是最容易反直觉的一点：background-image 中第一个 url() 在最顶层，最后一个在最底层。写反了，水印、遮罩、SVG 图标就根本看不见。
- 想实现「文字遮罩 > 渐变过渡 > 主图 > 底纹」？
- ✅ 必须写成：
background-image: url(mask.png), linear-gradient(...), url(main.jpg), url(pattern.png); - ❌ 写成主图在前、图标在后 → 图标被盖住，调试时也查不到
-
z-index对多重背景完全无效——它们同属一个背景层，无法跨层干预
HTML 元素本身的 z-index 与 background-image 层叠互不干扰
HTML 中多个 <img> 或带背景的容器叠加，靠的是 DOM 顺序 + position + z-index；而单个元素的多重背景图，是 CSS 背景绘制引擎内部的层级，两者运行在不同机制下。
- 别指望用
z-index把某个<img>盖在另一个元素的多重背景图之上——除非那个背景图所在的元素本身z-index更低 - 也别试图用
z-index调整同一元素内多张背景图的上下关系——它根本不响应 - 真正要混合两类叠加（比如浮动图标 + 底层渐变背景），得靠父容器堆叠上下文控制整体层级，再分别管理内部结构
最常被忽略的其实是「缺失即静默补默认」这个行为：浏览器不报错、不警告、不提示，只默默按规则渲染，结果却是图层错位、尺寸异常、位置偏移。检查时优先数逗号、数逗号、再数逗号——图层数、position 数、size 数，三个数字必须相等。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
