0

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

目前我正在使用ScrollMagic创建视差部分，并且效果很好。当我尝试将内容放在上面时，问题就来了。对于我正在使用的情况Bootstrap's .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's grid.

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

我对想法持开放态度。

4

1 回答 1

0

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

在我的代码中，我刚刚声明了一个<div>with 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>它已经在多个部分进行了测试，并且可以正常工作。简单的。呃……

于 2016-02-10T20:12:53.470 回答