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

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/