多重背景需严格对齐各层background-image、position、size、repeat等参数，CSS用逗号分隔多层值，Sass推荐用map而非list组织每层属性，避免索引错乱；须用join()合并生成单行声明，注意单位顺序与兼容性。
多重背景写法本身不依赖 Sass，但手动写容易漏参数
纯 CSS 的
支持逗号分隔多层值，比如渐变叠图片、颜色打底加纹理。但每层都要对齐
、
、
等，手写 3 层以上极易错位或遗漏某一层的
。
常见错误现象：
写了两层图片，但没配对应的
，结果第二层默认居中盖掉第一层
使用场景：卡片悬停叠加毛玻璃效果、按钮带图标+渐变、模态框背景加噪点纹理
关键点：CSS 多重背景是“从前往后绘制”，第一项在最上层，所以 Sass 遍历时顺序不能反
@each 遍历生成多重背景必须用 map 而不是 list
因为每层背景需要多个属性（图、位置、尺寸、重复方式），用 list 只能扁平存值，后期难维护；map 可以按层组织键值对，遍历时清晰对应。
错误写法：
—— 容易索引错乱，无法语义化扩展
正确结构：
性能影响：Sass 编译期展开，不影响运行时；但 map 嵌套过深（>5 层）会让编译变慢，建议单个组件控制在 4 层内
生成的 background 属性要合并成一行，不能拆开写
CSS 多重背景必须所有层的对应属性用逗号连成一个声明，比如
，而不是分别写两条
—— 后者只会保留最后一条。
典型坑：
会生成多条
，实际只生效最后一层
实操解法：用
把各层值拼成字符串，再一次性赋给
等属性
示例片段：
，最后输出
兼容性注意：IE 不支持多层
，若需兼容，得 fallback 到单层 +
伪元素模拟
真正难的是各层 background-size 和 background-position 的单位混用
图标用
，渐变用
，纹理图用
，这些单位在 Sass 里没法自动推导，必须显式定义，否则拼出来的值无效。
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
下载
立即学习
“
前端免费学习笔记（深入）
”；
容易踩的坑：
和
混在一个变量里，
会把
当字符串拼进去，导致
合法，但
就非法（顺序反了）
解决办法：约定每层
字段必须是字符串，如
或
，避免 Sass 类型转换干扰
调试技巧：编译后检查生成的 CSS 是否每层
属性逗号数一致，比如 3 层背景，
值里必须有且仅有 2 个逗号
多层背景本身不复杂，麻烦的是各层参数的“对齐感”——位置、尺寸、重复方式必须严格按层一一对应，少一个逗号，整条样式就失效。Sass 只是帮你少写几遍，填错 map 里的某个字符串，照样白忙活。
backgroundbackground-imagebackground-positionbackground-sizebackground-repeatbackground: url(a.png), linear-gradient(red, blue);background-position: top left, center;@each $val in (url(a.png), top, cover, no-repeat, url(b.png), center, contain, repeat)$layers: (layer1: (img: url(a.png), pos: top left, size: cover, repeat: no-repeat), layer2: (img: url(b.png), pos: center, size: contain, repeat: repeat));background-image: url(a.png), url(b.png);background-image@each $k, $v in $layers { background-image: map-get($v, img); }background-imagejoin()background-image$imgs: join($imgs, map-get($v, img), comma);background-image: #{$imgs};background::before16px100% 100%20px 20pxmap-get($v, size): 16pxmap-get($v, size): coverjoin()coverbackground-size: 16px, coverbackground-size: cover, 16pxsize"16px""cover"background-*background-position