多重背景图必须按层序从上到下用逗号分隔，最上层图像写在最前；各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 上下文。
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
这时改用 ::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 必须显式设置——不是为了美化，而是当所有背景图加载失败时，页面不至于裸奔露出白底或父容器颜色。
