透镜容器

透镜容器用于在一块内容区域上再叠一张遮罩图，做出透镜、镂空、窗口等视觉效果：

底下可放图片、文字或其它组件，上面用一张带透明区域的遮罩图控制「哪里能看穿、哪里被挡住」。

常放在「图片背景容器」里，叠在楼层切图的产品区、展示区上。

从左侧 「容器」 拖入 「透镜容器」，设置遮罩图与尺寸后，再把要展示的内容拖进容器内的「内容容器」即可。

组件能做什么

• 遮罩 + 内容分层：下层放实际内容，上层放遮罩图（一般不响应点击，仅作视觉）。
• 遮罩图可选：从图片银行选一张 PNG 等带透明通道的图，适合做圆窗、异形镂空。
• 内容区可嵌套：可在内部继续拖入图片、热区、可变化图片等子组件（视装修需要）。
• 尺寸可分别调整：内容区宽高、遮罩图宽高可分开设置；选遮罩图后会尝试按图片大小自动填入遮罩宽高。
• 子元素联动：开启后，拖入的内容会随容器一起缩放，便于统一调整。

设置项说明

位置与大小

容器整体可在画布上拖动；左边距、上边距在样式里微调。遮罩图在编辑器图层里常显示为「遮罩图片」，可单独调整遮罩大小（与属性里的遮罩宽高对应）。

常见用法

产品区「透镜窗口」

背景切图已画好边框，中间产品图用透镜容器：内容区放产品图或子组件，遮罩图用设计师提供的镂空框 PNG，对齐后形成透镜感。

异形展示区

需要圆形、圆角矩形等固定形状露出内容时，用透明遮罩图控制可见范围，比手调圆角更贴设计稿。

注意事项

• 遮罩图建议用 PNG：需要透明区域才能露出下层内容；纯不透明 JPG 会挡住全部内容。
• 先定内容区再对遮罩：调好宽度、高度后，再微调遮罩位置与大小，避免对不齐。
• 放在父容器内：多与「图片背景容器」配合，勿拖出父容器导致定位错乱。
• 遮罩不代替热区：遮罩层一般不负责点击；要跳转请在内容区内热区或图片链接等组件上设置。
• 发布前预览：编辑器与线上对透明图支持可能略有差异，保存后请在旺铺预览核对镂空边缘。

推荐操作顺序

1. 在背景容器内拖入「透镜容器」并摆到目标位置；
2. 设置「遮罩地址」及内容区宽高、遮罩宽高；
3. 将需要展示的内容拖入容器内部；
4. 按需开启「超出隐藏」「圆角」「子元素联动」；
5. 预览效果，保存并发布。

如有疑问，可结合「图片背景容器」「放大容器」文档一起查看。