Question

现在我在css中设置div的背景图像，然后使用background-size:cover和background-attachment:fixed让图像保持在背景中，并在滚动时填充窗口。这有效，但有很多重新粉刷，这使得它看起来很糟糕。虽然它在safari中看起来很好，这让我感到困惑......无论如何，我想在页面上的不同点（在我的内容div之后）有几个图像“保持放置”而我滚动我的内容而不会丢失一吨效率。这样做的最佳方式是什么？

CSS：

[class*="bg__"] {
    background-size: cover;
    background-attachment: fixed;
    background-repeat: no-repeat;
}

.bg__first {
    height: 400px;
    background-image: url("../images/IMG_7768.JPG");
}

.bg__second {
    height: 400px;
    background-image: url("../images/GOPR1046.JPG");
}

HTML

<div class="content-container">
    <div data-speed="10" class="bg__first parallax">
        <div id="welcome">
            <h1 id="welcome-message">Welcome</h1>
            <div id="welcome-buttons">
                <a class="button" href="#we-do" value="we-do">What we do</a>
                <a class="button" href="#we-done" value="we-done">What we've done</a>
            </div>
        </div>
    </div>

    <a name="we-do" class="anchor"></a>
    <div id="we-do" class="content">
        <h2 class="title-heading">What we do</h2>

    </div>

    <div data-speed="10" class="bg__second parallax"></div>

    <a name="we-done" class="anchor"></a>
    <div class="content">
        <h2 class="title-heading">What we've done</h2>

    </div>
</div>

用于视差滚动效果的替代方法

0 个答案: