使视差元素完全不透明

Question

我有以下 HTML 结构：

<section class="mysection">
  <div class="parallax">
    <div>
       <svg></svg>
    </div>
  </div>
</section>

<section class="back">
    <div class="triangle">
        <img src="img/red-triangle-bkgrd.png">
    </div>      
</section>

这是LESS中的CSS：

    .parallax{
        width: 90%;
        margin-left: auto;
        margin-right: auto;
    }

  section.back {
    .triangle {
        position: relative;
        img {
            position: absolute;
            right:0;
            top: 0;     
        }
    }
  }

在parallax 上使用视差之前，back 正好位于mysection 的底部边框下方。

当我将 parallax 缩放 1.11111111 时，parallax 使用 100% 的视口宽度。但是，back 不再位于parallax 的正下方。相反，它与parallax 区域重叠。这是真实情况的图片：

如何使重叠区域中的back 不可见？换句话说，如何使 svg 或其容器完全不透明而不显示其下方的重叠图像？

我在 svg 及其容器上尝试了 'opacity:1`，但它不起作用。

更详细地说，如果相关，我会使用一个名为 ScrollMagic 的工具来完成这项工作。

Answer 1

您可以使用z-index 设置堆叠顺序。尝试设置以下内容：

.mysection {
  position: relative;
  z-index: 1;
}

这应该确保您的 .mysection 中的任何内容（例如 svg/map）通过 任何相交的内容（假设您没有对其他元素应用更大的 z-index）。