Div向下滾動時淡出的陰影

Question

我正在尋找一種讓我的主內容div具有在您向下滾動頁面時消失的陰影的方法。最好的例子是在http://www.gamespot.com/，注意他們的主要內容有一個陰影，使其流行，但然後慢慢消失，使網站看起來平坦。這種效果如何實現？謝謝！

截圖：

Answer 1

一種解決方案，如在評論上述簡要地，是使用梯度下拉陰影所證明這裏：

http://jsfiddle.net/3eDpM/

另一種解決方案（更靜態的）是在背景中使用一個小圖像，例如，在Photoshop中產生一個2像素×40像素的漸變。然後，讓該圖像在所需div的背景中水平重複，同時將其定位在左上角。如：

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