静态背景容器

静态背景容器用于做出背景图相对浏览器窗口固定、页面滚动时产生视差/大背景不动的楼层效果。

与常用的「图片背景容器」一样，可在背景上叠加热区、可变化图片、滚动容器等子组件，但背景在发布后会按 固定背景（fixed） 方式呈现，适合首屏大图、全屏氛围图、长页面中的固定氛围层等设计。

从左侧 「容器」 拖入 「静态背景容器」，设置背景图与容器、背景尺寸后，再在内部摆放热区与其它交互组件即可。一般作为自定义内容模块里的整层主体使用。

组件能做什么

• 固定背景效果：发布后背景使用固定附着方式，访客上下滚动页面时，背景相对视口保持不动，内容在背景上正常滚动（视差类视觉）。
• 容器与背景尺寸分开设置：可分别指定「楼层占位宽高」与「背景图显示宽高」，便于背景图比可见区域更高、更宽。
• 整层承载子组件：内部可加热区、图片链接、级联容器、滚动容器等，子组件使用绝对定位对齐切图。
• 宽屏居中：默认开启「居中」，适配 1920 通栏旺铺布局。
• 换图自动带尺寸：设置图片地址后，会尝试按图片大小更新相关尺寸。

设置项说明

位置与大小

除属性表外，可在样式中调整 左、上（关闭居中时），或在画布上拖动容器位置。容器外框高度应与设计稿楼层高度一致；背景宽高按设计师提供的背景图尺寸填写。

可嵌套的子组件

与「图片背景容器」类似，内部可放置（包括但不限于）：

• 热区组件 — 透明可点击区域
• 可变化图片、图片链接 — 按钮、图标
• 滚动容器、级联容器、透镜容器 等 — 按设计需要选用

子组件需拖到背景图对应坐标上，使用绝对定位对齐。

常见用法

首屏全屏氛围图

容器高度设为首屏可见高度（如 560～800px），背景图更高（如 1080px 或更长），滚动时背景固定、前景内容下移，形成大气首屏。

长页中的固定氛围层

页面很长，某一楼层只需一块「钉在窗口上」的大背景，下方其它模块继续滚动，适合品牌视觉、场景图。

整层切图 + 多个热区

与图片背景容器用法相近，但设计稿明确要求背景不随楼层一起滚走时，选用本组件。

与相近组件的区别

注意事项

• 默认优先用图片背景容器：没有「背景固定/视差」需求时，请用「图片背景容器」，更简单、兼容性更好。
• 容器高 ≠ 背景高：容器高度决定模块占位；背景可更高，但过大可能导致加载慢或裁切与预期不符，请与预览对照。
• 务必旺铺预览：固定背景在不同浏览器、移动端表现可能有差异，发布前请实机或预览滚动查看。
• 子组件坐标相对本容器：热区等仍按背景切图坐标摆放，与图片背景容器一致。
• 不宜叠太多固定背景楼层：连续多层的 fixed 背景会加重性能负担，也易视觉混乱。

推荐操作顺序

1. 在自定义内容模块中拖入「静态背景容器」；
2. 设置「图片地址」，填写「容器宽度/高度」与「背景宽度/高度」；
3. 确认「居中」是否符合布局，调整左、上（若关闭居中）；
4. 在容器内添加热区、可变化图片等子组件并对齐切图；
5. 保存后在旺铺预览中上下滚动页面，确认背景固定效果与点击区域正常，再发布。

如有疑问，可结合「图片背景容器」「固定位置容器」文档一起查看。