javascript - 滚动时制作页面内容封面和图像

Question

我正在尝试这样做 http://www.youtube.com/watch?v=dAUpiocVwMA滚动时内容将覆盖图像的位置。我遇到的问题是它不是背景图像。这是一个实际的图像标签。这是我的。

<section id="home" class="bgWrapper">
<img id="parallaxImg" class="bgImg" src="images/bg/bizlifter-design-bg.jpg">
<!--<div id="parallaxImg"></div>-->
<article id="signUp" class="areaMargin">
    <h1>Business smart</h1>
    <h3>One simple system for your business.</h3>
    <div class="purple"></div>
    <div id="signupRow">
        <input type="text" placeholder="    name@company.com">
        <a id="btn-start" class="btn btn-lg btn-primary btnWhite" href="#">Start</a>
        <a id="btn-free" class="btn btn-lg btn-primary btnWhite" href="#">It's free!</a>
    </div>
    <p class="forwardSlash"><span class="purpleText">
        ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
    </span></p>
    <a class="btn btn-primary btn-lg googleBtn" href="#">Sign Up Using Google</a>
</article>

我要覆盖的图像位于第二行，id="parallaxImg"。

Answer 1

如果您想按照视频中所示进行操作，您可以将图像包装到一个 div 中，然后将应该覆盖图像的内容包装到另一个 div 中。有了这两个 div，您就可以使用 CSS z-index。如果您将 img-divs 位置设置为“固定”，文本将滚动到顶部，而图像将保留在其位置。

http://www.w3schools.com/cssref/pr_pos_z-index.asp