图片背景容器

图片背景容器是雨燕装修大师中最常用的容器类组件。它将整张设计图作为模块背景，并在其上叠加热区、可变化图片、滚动容器等子组件，适合旺铺「自定义内容」里常见的「整图楼层 + 可点击区域」搭建方式。

一、组件功能介绍

• 背景图展示：组件作为容器使用，便于在其上绝对定位子元素。
• 子组件承载：可在容器内拖入热区、可变化图片、跑马灯容器、放大容器、阴影容器、透镜容器等，实现点击跳转、Hover 换图、滚动公告等效果。
• 导出兼容：发布时输出为「背景图 + 子组件 HTML」结构，与阿里巴巴旺铺自定义模块规范兼容。

二、添加组件的步骤

1. 在阿里巴巴国际站旺铺装修后台，进入需要编辑的页面。
2. 添加或打开一个自定义内容模块，点击「自定义内容」进入雨燕装修大师可视化编辑器。
3. 在编辑器左侧组件面板中，找到分类 「容器」。
4. 将 「图片背景容器」 拖拽到画布中（通常作为该模块的根容器或楼层主体）。
5. 选中该容器，在右侧属性面板设置「图片地址」（可从图片银行选择或粘贴 CDN 链接）。
6. 根据需要，从「基础」或「容器」分类继续拖入热区组件等子组件，并调整位置与大小。
7. 预览无误后保存模块并发布页面。

三、主要配置项说明

3.1 属性面板

3.2 样式面板（可编辑维度）

除上述属性外，还可在样式中调整：

• 宽度（width）、高度（height）：默认随背景图自动设置，旺铺楼层常见为 1920px 宽。
• 左边距（left）、上边距（top）：关闭「居中」后用于精确定位；作为 body 下首个容器时通常会置于 (0, 0)。

容器在画布上支持拖拽移动和拖拽调整大小。

3.3 可嵌套的子组件

图片背景容器内可放置（包括但不限于）：

• 热区 — 透明可点击区域，需配置链接地址
• 可变化图片 — 鼠标悬停切换图片（如按钮 Hover）
• 跑马灯容器 — 横向/纵向滚动内容
• 放大容器、阴影容器、透镜容器 — 产品卡片等交互效果
• 级联容器 等（按页面复杂度选用）

子组件均需使用绝对定位，相对背景图上的设计稿坐标摆放。

四、使用场景示例

场景 1：普通楼层（整图 + 多个链接）

设计师按 1920px 宽导出楼层切图 → 拖入「图片背景容器」并设为背景 → 在按钮、产品入口等位置逐个添加「热区组件」并填写链接。

场景 2：带 Hover 换图的按钮区

在图片背景容器内，对需要悬停换图的按钮使用「可变化图片」，配置底图（under）与悬停图（hover），而不是用热区。

场景 3：背景图上的滚动公告

在容器内添加「跑马灯容器」，设置滚动方向、速度，用于新闻、公告条等。

场景 4：首页首屏大块 Banner

将图片背景容器作为模块第一个楼层，开启「居中」，高度与首屏切图一致；热区覆盖「立即咨询」「查看产品」等区域。

五、注意事项

• 推荐宽度 1920px：国际站旺铺 PC 端以 1920 为设计基准；背景图宽度建议与设计稿一致，避免拉伸模糊。
• 先容器后子组件：应先放好图片背景容器并设好背景图，再在该容器内部添加热区等子组件；热区拖在容器外会导致定位基准错误。
• 热区必须落在容器内：热区的 left / top 是相对于父容器的；保存前在预览中逐一点击验证链接是否可点。
• 更换背景图会改尺寸：替换「图片地址」后容器可能按新图尺寸自动变化，已摆放的热区坐标需重新核对。
• 「居中」与手动定位：多数全宽楼层保持「居中」开启；仅侧边小模块、非通栏区块可关闭居中，用 left / top 精调。
• 与「热区图片」二选一：若只需一张图加几个链接、无需再叠其他复杂组件，可用更简单的「热区图片」；需要多种子组件叠加时优先用「图片背景容器」。
• 平台限制：自定义模块不允许外链 JS 和 <style> 标签，效果依赖内联样式与页面已有 CSS class，请勿依赖自定义脚本。

六、推荐工作流小结

1. 按楼层切图（1920px 宽）并上传图片银行；
2. 拖入「图片背景容器」→ 设置图片地址；
3. 在容器内添加「热区组件」→ 对齐设计稿 → 填写链接；
4. 按需叠加可变化图片、跑马灯等；
5. 保存模块并在旺铺后台预览发布后上线。

如有疑问，可在帮助中心查看「热区组件」「可变化图片」等相关文档，或联系客服。