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

如何解决淡出屏幕顶部和底部的元素

我想淡出到达页面顶部或底部的所有元素。 一个例子：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); 
});

我该怎么办？谢谢！

解决方法

您可以使用 linear-gradient 代替图像来达到相同的效果：

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

如果您想开发更适合您的 linear-gradient，请访问此网站：https://cssgradient.io/