多背景图片需按「从上到下、从近到远」顺序用逗号分隔，每张图须配全background-position和background-size等对应子属性，缺一则整条声明失效；background-color仅作用于最底层，linear-gradient也计入图层；IE11对/语法兼容差，建议降级处理。
background里多个图片怎么写才生效
必须按「从上到下、从近到远」的顺序写，最前面的图片在最顶层，最后面的在底层。浏览器按顺序绘制，后写的会盖住先写的——这点和图层逻辑一致，但容易误以为「先写的在上面」。
-
background里用逗号分隔多张图片，每张图片可独立配background-position、background-size、background-repeat等，用空格连在一起 - 所有图片共用同一个
background-color，它只画在最底层（即最后一个图片的下面） - 如果某张图片加载失败或路径错误，它那一层就透明，不影响其他层渲染
为什么写了逗号却只显示一张图
常见原因是漏写了对应层级的其它背景子属性，导致语法不完整，浏览器直接丢弃整条声明。CSS background 是「简写属性」，一旦某一层缺了位置或尺寸，整组值可能被忽略。
- 每张图片至少得带
background-position和background-size，否则容易退化为默认值（如0% 0%+auto），多张图全挤在左上角叠成一团 - 别混用简写和单独属性：比如写了
background: url(a.png), url(b.png);，再单独设background-position: center;，这会让两层都变成center，失去控制 - 检查 DevTools 的 computed 样式，看 browser 是否真的解析出了多层 —— 如果只显示一行
background-image值，说明语法有误
叠加时如何控制某张图不平铺、另一张要重复
每张图的 background-repeat 必须和它对应的图片写在同一组值里，用空格隔开，不能提出来单独写。
background: url(logo.svg) no-repeat top right / 48px 48px,
url(pattern.png) repeat-x bottom / auto 4px,
linear-gradient(to bottom, #fff, #eee);
- 三张图：SVG 图标（不平铺、右上角、固定大小）、PNG 底纹（只横向平铺、贴底、高度 4px）、渐变（铺满整个容器）
- 每组值中，
/前是 position，后面是 size；no-repeat或repeat-x必须紧挨着对应图片，顺序不能错 - 注意
linear-gradient()也算一张「背景图」，也要参与逗号分隔和层级排序
IE11 及更老浏览器能用吗
IE10+ 支持多背景，但 IE11 对 background-size 和 background-position 的多值写法兼容性差，尤其遇到 / 语法时容易整体失效。
立即学习“前端免费学习笔记（深入）”；
- 如果必须兼容 IE11，建议把
background-size和background-position拆成独立属性（如background-position: top right, bottom;），避免用/ - 不要在多背景里混用
em、rem或函数（如calc()）做background-size，IE11 解析不稳定 - 真实项目中，只要不支持多背景的浏览器占比低于 0.5%，基本可以放心用 —— 但得确认设计是否允许降级为单图
多背景本身不难，难的是每张图的尺寸、定位、重复方式都要对齐容器语义。写完一定要在不同尺寸容器里拖拽缩放看效果，光看静态图很容易漏掉某一层错位或裁剪。
