多重背景图必须按层序从上到下用逗号分隔，最上层图像写在最前；各background属性需值数量匹配，否则整条声明失效；伪元素::before更适合独立交互图层；IE9及以下不支持，需手动提供单层fallback并显式设置background-color。
background-image 逗号分隔写法必须按层序排列
最上层的图必须写在最前面，否则视觉顺序会错乱。比如想让水印图标盖在主背景图上，background-image: url('watermark.png'), url('bg.jpg') 才对；反过来就变成水印被盖住，根本看不见。
常见错误是把“主图”放前面、装饰图放后面，结果装饰图失效。浏览器渲染时严格按逗号顺序从前往后叠放，不看文件大小或命名逻辑。
- 第一项：最上层（如 SVG 图标、文字遮罩、半透明纹理）
- 第二项：中间层（如渐变、底纹、模糊 overlay）
- 第三项及以后：底层（如大图背景、平铺图案）
每个 background-* 属性都支持逗号分隔值
不能只写一个 background-position 就指望它适配所有图——除非你真想让所有图都居中。更常见的是每张图位置不同：background-position: top right, center, 20px 10px。
注意：如果某个属性（如 background-repeat）只写一个值，比如 no-repeat，那它会被复制应用到所有图层；但一旦写了多个，就必须数量匹配，否则整条声明会被浏览器忽略。
-
background-size: 40px 40px, cover, 100% auto—— 每张图独立缩放 -
background-attachment: scroll, fixed—— 可混合滚动/固定行为 -
background-origin和background-clip也能逐层控制裁剪区域
伪元素 ::before 更适合需要独立交互的图层
当某一层要 hover 移动、淡入、或做 CSS 动画，而其他层保持静止时，background 多图语法就扛不住了——因为所有图层共用同一个 animation 和 transform 上下文。
这时改用 ::before 或 ::after 承载额外图层更可靠：
- 主元素设
position: relative和基础背景（底层） -
::before设content: ""、position: absolute、inset: 0，再加自己的background-image - 用
z-index显式控制层级，hover 时只动::before的transform或opacity
这种写法绕开了多背景动画的硬限制，也避免了 background-position 动画卡顿问题。
兼容性和 fallback 要手动兜底
CSS 多重背景在 IE10+、Edge 12+、Chrome 10+、Firefox 4+ 都支持，但 IE9 及以下完全不认逗号语法，会直接丢弃整条 background 声明——导致没背景、只剩文字。
稳妥做法是先写单层 fallback，再覆盖多层：
button.dual-bg {
background: #f0f0f0; /* IE9 及以下看到这个 */
background: linear-gradient(135deg, #4a6fa5, #6b9bd8),
url('texture.svg') repeat;
background-size: cover, 16px 16px;
}
别依赖「自动降级」，浏览器不会帮你拆分逗号列表；少写一个逗号或漏一个值，整条规则可能静默失效。
真正容易被忽略的是 background-color 必须显式设置——不是为了美化，而是当所有背景图加载失败时，页面不至于裸奔露出白底或父容器颜色。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
