Question

https://jsfiddle.net/James2038/1x9a2gxq/1/

如jsfiddle中所示，我试图将不透明度设置为滚动div，以便下面的云稍微出现。尝试了很多方法（rgba，opacity，img - 全部使用css。）

body, html {
        height: 100%;
    }

    .parallax {
        background-color: white;
        background-image: url("https://static.pexels.com/photos/53594/blue-clouds-day-fluffy-53594.jpeg");
        height: 100%; 
        /* Create the parallax scrolling effect */
        background-attachment: fixed;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
    }

    #parallax-curtain{
        height: 100%;
        background: rgb(255, 255, 255);
        background: rgba(255, 255, 255, .5); /*In rgba, the a has no effect*/
    }   


<body>

<div class="parallax"></div>

<div id="parallax-curtain"></div>

<div class="parallax"></div>

</body>

Answer 1

如果我是正确的，你想知道为什么.parallax-curtain div没有在背景中显示正确的云？这是因为你实际上并没有用.parallax-curtain div滚动云。当您将div的背景附件设置为fixed时，唯一发生的事情是div中的背景将被修复。因此，为了让视差幕div显示到云端，你必须将它放在你的视差div中，如下所示：

<div class="parallax">
  <div class="parallax-curtain">
  </div>
</div>

否则你基本上是滚动3个不会相互重叠的div。您可以看到，如果您将示例中的rgba更改为rgba（0,0,0,0.5），它是黑色且不透明度为50％。它将显示为灰色，因为它只是覆盖页面的白色背景，因此您可以看到黑色到白色。因此，看起来没有任何事情发生的原因是因为你有一个白色rgba，不透明度覆盖白色背景。您可以使用上面的html标记尝试类似下面的内容。

.parallax {
    background-color: white;
    background-image: url("https://static.pexels.com/photos/53594/blue-clouds-day-fluffy-53594.jpeg");
    height: 100%; 
    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    /*following just for demo purposes to add height and top padding*/
    height:300vh;
    padding-top:100vh;
}
.parallax-curtain{
  height:100vh;
  background:rgba(255,255,255,0.5);
}

这是一个小提琴Fiddle Demo

Answer 2

当检测到向下滚动并应用css不透明度时，您需要覆盖.parallax类。以下是使用jQuery的示例。

工作fiddle

脚本：

$(function(){
        var previousScroll = 0;
            $(window).scroll(function(event){
                var scroll = $(this).scrollTop();
                var heading = $('.parallax');

                if (scroll > 600){
                    console.log('scrolling down');
                    heading.fadeIn("slow", function() {
                        heading.css('opacity', '0.4');
                    });
                } else {
                    heading.fadeIn("slow", function() {
                        heading.css('opacity', '1');
                    });
                }
                previousScroll = scroll;
         });
})

使用不透明度设置视差滚动div

2 个答案: