使视差元素完全不透明

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 底部边框的正下方。

当我按 1.11111111 缩放 parallax 时，parallax 使用视口的 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)。

使视差元素完全不透明

Make parallaxed element completely opaque

html

css

z-index

css-position