CSS如何将多张背景图片叠加_在background属性中用逗号分隔多个值-css教程-PHP中文网

多背景图片需按「从上到下、从近到远」顺序用逗号分隔，每张图须配全background-position和background-size等对应子属性，缺一则整条声明失效；background-color仅作用于最底层，linear-gradient也计入图层；IE11对/语法兼容差，建议降级处理。

css如何将多张背景图片叠加_在background属性中用逗号分隔多个值

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 必须和它对应的图片写在同一组值里，用空格隔开，不能提出来单独写。

CSS工具箱(专业版)

全功能 CSS 工程手册，覆盖性能优化、无障碍、设计系统与跨浏览器兼容。

下载

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%，基本可以放心用 —— 但得确认设计是否允许降级为单图