淡入屏幕顶部和底部的元素

Question

我想淡出所有到达页面顶部或底部的元素。 一个例子：https://css-tricks.com/examples/FadeOutBottom/

我想要完全相同的东西，但使用另一种方法，因为我使用背景图像作为主体，所以我不能使用这种方法，因为它使用图像来淡出元素。

我也试过这个，但它对我不起作用，因为对于长文本<p> 标签，不在顶部的部分也会褪色：

var elements = document.querySelectorAll( 'body *' );
$(window).scroll(function(){
    $("h2").css("opacity", 1 - $(window).scrollTop() / $("h2").offset().top); 
    $("p").css("opacity", 1 - $(window).scrollTop() / $("p").offset().top); 
});

我该怎么办？谢谢！

Answer 1

你可以用linear-gradient代替图片来达到同样的效果：

#bottom_fade {
    position: fixed;
    height: 200px;
    width: 100%;
    bottom: 0;
    background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0)100%);
    z-index: 99;
}

如果您想在更适合您的linear-gradient 上工作，请查看此网站：https://cssgradient.io/