javascript - ScrollMagic:如何将内容放置在视差背景之上

Question

所以我在构建垂直视差滚动网站时遇到了问题。

目前我正在使用 ScrollMagic 来创建视差部分，并且效果很好。当我尝试将内容放在上面时，问题就来了。对于我的情况，我正在使用 Bootstrap 的 .container 这样我就可以将我的内容放在不同的行、列等中。

我可以看到缺陷，它存在于结构本身，但我正在尝试找到一种破解它的方法，有什么想法吗？

<!-- Main Container -->
<div id="fullpage">
<div class="spacer s0"></div>
<!-- Section -->
<div class="section">
    <div class="absolute main-wrapper container">

        <div class="row">
        <p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi amet asperiores, illo sapiente, magni fuga distinctio quisquam tenetur error natus accusantium cum veniam voluptatem! Id qui at quas culpa facere.</p>
        </div>
    </div>

<div id="parallax1" class="parallaxParent">
<div style="background-image: url(img/bcg_slide-1.jpg);">
</div>
</div>
</div>
<!-- /Section -->
<!-- Section -->
<div class="spacer s1">
<div class="box2 blue">
<p>Content 1</p>
</div>
</div>
<!-- /Section -->
<!-- Section -->
<div class="spacer s0"></div>
<div class="section">
<div id="parallax2" class="parallaxParent">
<div style="background-image: url(img/bcg_slide-2.jpg);"></div>
</div>
</div>
<!-- /Section -->
<div class="spacer s1">
<div class="box2 blue">
<p>Content 2</p>
</div>
</div>
<div class="spacer s0"></div>
<!-- Section -->
<div class="section">
<div id="parallax3" class="parallaxParent">
<div style="background-image: url(img/bcg_slide-3.jpg);"></div>
</div>
</div>
<!-- /Section -->
</div>

因此，如果我将 div 放在背景视差图像之前，它会与视差图像重叠，并创建一个带有文本的白色容器。我已经完成了 position absolute，但这意味着我不能使用 bootstrap 的网格。

我尝试将视差背景放入 div 中。

我乐于接受想法。

Answer 1

其实我已经破解了。这比我想象的要简单得多。

在我的代码中，我刚刚声明了一个 <div>与 position: absolute; , width: 100%;和 z-index: 1;像这样。

<div class="section">
  <div style="position: absolute; width: 100%; z-index: 1;">
    <div class="container">
      <div class="row">
        <p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea fugiat officiis aspernatur deserunt molestias debitis placeat ratione fugit sed. Rem consectetur facilis maiores facere velit error eos quisquam dolorem aliquam.</p>
        </div>
      </div>
</div>
                <div id="parallax2" class="parallaxParent">
                    <div style="background-image: url(img/parallax_bg2.png);"></div>
            </div>
</div>

所以这创建了一个 <div>在我的 <div> 之上与视差图像。它已经在多个部分进行了测试并且有效。简单的。呃...