当您向下滚动时，Div阴影会逐渐消失

Question

我正在寻找一种方法让我的主要内容div有一个阴影，当你向下滚动页面时，它会逐渐消失。一个完美的例子是http://www.gamespot.com/注意到它们的主要内容有一个阴影，使其流行然后慢慢消失，使网站看起来平坦。这种效果是如何实现的？谢谢！

截图：

Answer 1

如上面评论中简要提到的，一种解决方案是使用渐变阴影，如下所示：

http://jsfiddle.net/3eDpM/

另一个解决方案（一个更静态的解决方案）是在背景中使用一个小图像，比如在photoshop中产生的2px x 40px渐变。然后，让该图像在所需div的背景中水平重复，同时将其定位在左上角。如：

width: 2px;
height: 40px;
background-position: left top;
background-image: url('../img/gradient.png');
background-repeat: repeat-x;