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

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

当检测到向下滚动并应用 css 不透明度时，您需要覆盖 .parallax class。下面是使用 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;
         });
})

Answer 2

如果我是对的，您想知道为什么 .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);
}

这里是fiddleFiddle Demo

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

Set parallax scrolling div with opacity

css

parallax