当用户不断滚动网页时，有没有办法让我的 div 背景越来越不透明？答案

【问题标题】：Is there a way of making my div background less and less transparent while user keeps scrolling the webpage?当用户不断滚动网页时，有没有办法让我的 div 背景越来越不透明？
【发布时间】：2015-07-31 14:12:44
【问题描述】：

我有一个使用视频背景的引导网页。更重要的是，我正在使用以下 css 代码：

.transparent{
    box-shadow: 0 0 0 1000px rgba(0, 999, 0, 1);
    overflow:hidden;

}

#imgBox{
    box-shadow: 0 0 0 1000px rgba(0, 999, 0, 1);

}

在覆盖层中制作“洞”，这样当用户看到该层时 - 他只能看到下面的一部分视频。很难解释，看一下这个例子：http://jsfiddle.net/Leytgm3L/31/

我想实现一个效果，绿色层一开始是透明的（假设它有rgba(0, 999, 0, 1)，但是当用户继续向下滚动并且这个层变得越来越明显时，它变得不那么透明了（所以例如，当它完全可见时，它应该有rgba(0,999,0,1)。如何使用 jquery 或 css 实现它？

【问题讨论】：

你有没有把 CSS 线性渐变作为背景图片 - developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient
...仅供参考，rgba(0,999,0,1) 不是有效颜色。前 3 个值的范围为 0-255。 “999”在这里不是一个选项。
你可能在 行中打错了（假设它有 rgba(0, 999, 0, 1)，你会说 （假设它有rgba(0, 999, 0, 0.1) 而不是 @BenPhilipp 是真的，rgb() 或 rgba() 在 CSS 中的最大颜色值为 255。
我不确定您的要求，但请查看您的jsfiddle.net/Leytgm3L/36的这个更新的jsfiddle@
@akshayk 解决了我的问题！请将其作为答案发布，以便我接受，谢谢！

标签： javascript jquery html css twitter-bootstrap

【解决方案1】：

我不确定您的要求，但请查看您的更新后的 jsfiddle

刚刚在$(window).scroll 中添加了$("#black").css("opacity",$("body").scrollTop()/1000);，这样它会增加窗口滚动的不透明度，我使用的量非常小，因为不透明度的值只能在 0 到 1 的范围内

http://jsfiddle.net/Leytgm3L/36/

【讨论】：

【解决方案2】：

您可以在 JQuery 中创建一个$(window).scroll 函数，检测滚动方向并据此使用 rgba 调整不透明度，如下所示：

$("#greenbox").css("background-color", "rgba(0, 999, 0, "+opacity+")");

【讨论】：

使用你提到的颜色值，但是无效。