使用Oxygen Builder实现背景图、遮罩分割线与卡车图层层级效果求助

一、核心布局结构规划 #

先搭建清晰的层级容器框架，避免元素层级混乱：

• 创建一个父容器组件，设置 position: relative（作为内部定位元素的基准容器）。
• 在父容器内依次添加：
  • 背景图模块：插入风景图，调整背景尺寸、定位确保全屏/目标区域显示。
  • 正面卡车图片组件：设置合适尺寸与位置，放在背景图上方。
  • 斜线分割线（自定义或修改默认组件）：放在正面卡车上方。
  • 背面卡车图片组件：放在分割线上方，实现半覆盖效果。

二、解决层级覆盖问题（关键） #

Oxygen 默认按元素添加顺序决定层级，但 Shape Divider 可能自带高优先级样式，需手动修改 z-index：

1. 确保父容器的 position 为 relative（否则内部元素的 z-index 不会生效）。
2. 选中斜线分割线元素：
   • 若用默认 Shape Divider：在样式面板「Position」选项中，设置 z-index: 1。
   • 若用自定义分割线（推荐，避免默认样式冲突）：参考下方代码块设置。
3. 选中背面卡车图片组件：
   • 设置 position: absolute 或 relative（z-index 仅对定位元素生效）。
   • 设置 z-index: 2（数值需大于分割线的 z-index）。
4. 拖拽调整背面卡车的位置，使其一半覆盖在分割线上。

三、自定义斜线分割线（替代默认 Shape Divider） #

若默认 Shape Divider 层级无法调整，用代码块实现带文字的斜线分割线更灵活：

1. 添加「代码块组件」，插入以下内容：

<div class="custom-shade-divider">
  <span>shade divider</span>
</div>

2. 给代码块添加自定义 CSS：

.custom-shade-divider {
  position: absolute;
  top: 40%; /* 根据你的布局调整垂直位置 */
  left: 0;
  width: 100%;
  height: 50px;
  background-color: #000;
  transform: rotate(-4deg); /* 调整斜线角度 */
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.custom-shade-divider span {
  color: #fff;
  transform: rotate(4deg); /* 抵消分割线旋转，让文字保持水平 */
  font-size: 16px;
  font-weight: 600;
}

四、调试注意事项 #

• 检查父容器是否开启 overflow: hidden，若开启可能遮挡部分元素，需关闭。
• 实时预览页面，微调各元素的 top/left 值与 z-index，直到达到预期的半覆盖效果。

内容的提问来源于stack exchange，提问作者smiling