Question

我正在寻找一种方法，将不透明度/ rgba颜色应用于页面的所有内容，因为它与页面的顶部和底部相距一定距离。

这就是我想要实现的目标：

在上面的例子中，绝对定位的渐变位于底部文本的上方，给出了文本淡出的错觉。但是，这不是我的选择，因为我在我的页面上使用背景图像。所以对于这个项目，我需要使用jQuery淡出特定div中的内容，因为它越接近页面顶部，并且从底部淡出。

我还需要确保整个div在到达某一点时不会淡出，它只需要在向上或向下通过视口时位于顶部的内容。

这可能吗？

感谢您的帮助

编辑：进一步的细节 -

我有一个固定的页眉和页脚，并希望主体内容淡出/淡入，因为它从底部进入视口并离开顶部。页眉/页脚具有清晰的背景，因此主体的内容不会隐藏在它们后面。

<body>
    <header>Header</header>
    <div class="main">
        Lorem ipsum dolor
    </div>
    <footer>Footer</footer>
</body>

Answer 1

在这个答案中，您可以找到一些在不透明度中使用grandient的示例，并且具有非常好的浏览器支持：

我希望这有帮助！

- 编辑：

正如问题所说，有一个背景图像，所以第一个解决方案可能不合适。看看这个似乎更合适的其他答案：

特别是这个CSS行：

-webkit-mask-image: -webkit-gradient(linear, left top, 
  left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
}

但它似乎没有完整的浏览器支持。