html - 向下滚动时淡出的 Div 阴影

Question

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

截屏：

Answer 1

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

http://jsfiddle.net/3eDpM/

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

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