html - 使视差元素完全不透明

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 使用视口(viewport)的 100% 宽度。但是，back 不再位于 parallax 下方。相反，它与 parallax 区域重叠。这是真实情况的图片:

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

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

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

Answer 1

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

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

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