滚动时更改每个div中的图像背景不透明度

Question

我想知道如何让背景图像在每个滚动位置改变不透明度。背景图像具有黑色背景，其中第一部分是人的照片，当用户滚动到下一部分时，该人的背景应该改变它的不透明度，直到它变成白色模糊白色。我使用了背景图片并将其css background-size设置为cover，以便它始终保持在屏幕上。现在我所做的只是在每个部分中插入一个div并在滚动时调整其不透明度，但它覆盖整个背景。

CSS：

body {
    background-image: url('../images/bg.png');
    background-repeat:no-repeat;
    background-position: center center;
    background-attachment:fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-color: #464646;
}

HTML：

<div class="section active container-fluid">
        <div class="row">
            <div class="col-xs-8 col-xs-offset-1">
                <div class="content content-one">
                    <h2 id="content-one__h2" class="">We are</h2>
                    <h2 id="content-one__h2--second" class="blue">PT Freeport Indonesia</h2>
                </div>
            </div>
        </div>
    </div>

  

注意：我使用jquery fullpage来实现每个屏幕的适合度   滚动。

更新：请参阅here了解我在说什么。 并且实际结果应该像下面的背景应该覆盖整个屏幕只有不透明度在人的背后变化。

谢谢！

Answer 1

据我所知，你不应该触摸背景大小，只需调整容器的不透明度，这种情况就是身体;但这会使一切都不那么明显。 因此，将图像设置为div，使其固定，并调整其可见性。

有些事情：

var maxScroll = 1024; //set this to the desired heigth

$(window).on('scroll', function() {  
     var newScroll = $(document).scrollTop(); //save the new value

     $('#backgoundDiv').css('opacity', newScroll / maxScroll);
});

Answer 2

参考您发布的链接，他们将背景颜色设置为alpha值：

第一个div是：rgba(255,255,255,0.1)

第二个div是：rgba(255,255,255,0.2)

第三个div是：rgba(255,255,255,0.3)

依旧......

然后他们向下滚动，同时保持大图像为body背景，就像你一样。

Answer 3

在您问题的网址中，每个滚动的部分都是一个渐变不透明度的div。你需要做那样的事情。