浏览器支持多背景叠加，但多个background-image值失效通常因逗号缺失、简写覆盖或属性顺序不匹配；必须用逗号分隔各层，且background-position等属性需严格按相同顺序对应。
多个 background-image 值被忽略或只显示一个
浏览器其实完全支持多背景叠加，但 background-image 值不生效，往往是因为语法错误或层级被覆盖。CSS 多背景必须用逗号分隔，且顺序决定图层堆叠：**最左边的图层在最上层，最右边的在最底层**。如果写成空格、分号或换行拼接，整个声明会被当作无效值丢弃。
- 错误写法：
background-image: url(a.png) url(b.png);（空格 → 只认第一个） - 正确写法：
background-image: url(a.png), url(b.png);（逗号分隔） - 若混用了
background简写，它会重置所有背景相关属性（包括background-position、background-size），导致部分背景“消失”
叠加后某一层完全看不见
不是没加载，而是被遮挡或尺寸/定位异常。多背景共用一套 background-position、background-size、background-repeat 等属性，但可以为每层单独指定——用逗号对应顺序，缺省值会自动补 initial（例如未写 background-size 的层默认是 auto auto）。
- 位置错位：确保
background-position值数量与background-image层级数一致，如：background-position: top left, center; - 尺寸撑不满：某层
background-size: 20px 20px但容器宽高远超，又设了no-repeat，就只在左上角显示一个小图 - 透明底图被盖住：如果上层是不透明 PNG 或纯色
linear-gradient，下层内容自然不可见——可改用rgba()或调整 opacity（但注意background-color不参与多背景栈，它是独立底层）
需要不同 repeat 行为或混合渐变+图片
多背景真正实用的场景，是组合 linear-gradient 和图片实现毛玻璃、蒙版、纹理叠加等效果。关键点在于：渐变和图片一样是“图像”，可并列声明；重复行为必须逐层控制。
div {
background-image:
linear-gradient(135deg, rgba(255,255,255,0.1), transparent),
url(pattern.png),
radial-gradient(circle at 20% 30%, rgba(255,0,0,0.15), transparent 50%);
background-repeat: no-repeat, repeat, no-repeat;
background-position: center, 0 0, center;
background-size: cover, 20px 20px, contain;
}-
background-repeat、background-position、background-size都支持逗号分隔，顺序必须严格对应background-image - 任意一层设为
none（如background-image: url(a.png), none;）可临时禁用某层，方便调试 - 注意兼容性：IE10+ 支持多背景，但 IE 不支持
radial-gradient的新语法（需加-ms-前缀，且功能受限）
background 与 background-image 混用导致覆盖
这是最隐蔽的问题：一旦用了 background 简写，哪怕只设颜色，也会把之前声明的 background-image 清空。比如：
立即学习“前端免费学习笔记（深入）”；
.box {
background-image: url(logo.png), url(bg.png);
background: #fff; /* 这行会让上面两层图片全部失效 */
}-
解决方法：要么全程用简写（把所有层都写进
background），要么避免混用——用background-color单独设底色，保留background-image独立声明 - 推荐做法：
background-color+background-image+ 各自对应的 position/size/repeat，语义清晰且不易出错 - 检查 computed styles 时，看浏览器开发者工具里
background-image是否显示为none，就能快速判断是否被简写覆盖
多背景本身很稳定，问题几乎都出在逗号漏写、简写误用、或各层属性没对齐顺序。调的时候盯紧三件事：逗号数、值数量、声明顺序——少一个逗号，整条规则就废了。
