html - 为什么 "parallax"效果对未固定的背景图像不起作用

Question

当我向 div 添加背景图像时，下面的 div 会滚动经过该图像，从而产生很酷的视差效果。

但是，这仅在固定背景附件时有效。但是在固定位置，我无法让背景图像大小“覆盖”或“包含”div，而图像不会消失或调整得太大。

我找到的唯一解决方案是使用 repeat，但我不想这样做。我也玩过 background-position 但这似乎也不起作用，图像有时会消失或者在浏览器中不在同一个地方

 .imgContainer{
            height:250px;
            border-top-right-radius:inherit;
            border-top-left-radius:inherit;
            background-repeat:no-repeat;
            background-image: url('test.jpg');
            background-size: cover;
                            background-attachment: fixed; /*If I remove this the image fills the div approriately, but the div below it doesn't scroll over it. */

HTML

    <div class="content">   
        <div class="imgContainer">
        </div> <!--ends imageContainer -->
        <div class="contentPosts">
                Content goes here and should scroll above the image rather than push it up
            </div>

Answer 1

使用 JavaScript 库 Skrollr.js ，您将可以很好地控制动画和时间。

查看我们的这两个教程，让您开始使用 Skrollr:

• > Simple parallax scrolling tutorial
• > How to create a parallax scrolling website