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位置设置为“fixed”，则文本将滚动到顶部，图像将保持在其位置。

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

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

1 个答案: