視差滾動（Parallax Scrolling）是指讓多層背景以不同的速度移動，形成立體的運動效果，帶來非常出色的視覺體驗。作為今年網頁設計的熱點趨勢，越來越多的網站應用了這項技術。
不明白的可以先看看eBay上的效果：http://www.ebay.com/new/
其實就是固定背景不讓它隨着滾動軸移動，但包含背景的容器是跟着滾動的，所造成的視覺差異看起來就像跟轉換場景一樣。（這個解釋別嫌混亂…）
在CSS中定義背景滾動方式的屬性是backgroud-attacthment
background-attachment -- 定義背景圖片隨滾動軸的移動方式
- 取值: scroll | fixed | inherit
- scroll: 默認值。背景圖像會隨着頁面其余部分的滾動而移動。
- fixed: 當頁面的其余部分滾動時，背景圖像不會移動。
- inherit: 規定應該從父元素繼承 background-attachment 屬性的設置。
- 初始值: scroll
- 繼承性: 否
- 適用於: 所有元素
附帶w3c的鏈接：http://www.w3school.com.cn/css/pr_background-attachment.asp
瀏覽器的支持性：
測試了chrome,opera,safari,firefox,ie7-8都是可以的，所以就是說IE6下不行~
在IE6下使用這個屬性，需要把background-attachment:fixed放置於body或html當中，就是說你說在其它標簽里面是沒用。上面的w3c里可以看得到效果就是因為它是放在body里的。
這是我自己做的一個demo，點擊可以下載
代碼：
<!doctype html> <html> <head> <meta charset="utf-8"> <title>滾動視覺差示例</title> <style> *{ padding:0; margin:0 } body{ text-align:center; background-attachment:fixed; } #main{ width: 1280px; margin:auto } .header{ background:#fff; padding: 10px 0 } .bg-attachment{ background:url(6.jpg) center center no-repeat; box-shadow:0 7px 18px #000000 inset,0 -7px 18px #000000 inset; -webkit-box-shadow:0 7px 18px #000000 inset,0 -7px 18px #000000 inset; -moz-box-shadow: 0 7px 18px #000000 inset,0 -7px 18px #000000 inset; -o-box-shadow: 0 7px 18px #000000 inset,0 -7px 18px #000000 inset; -ms-box-shadow: 0 7px 18px #000000 inset,0 -7px 18px #000000 inset; background-attachment:fixed; } .bg-attachment .shadow{ width:80%; height:700px; overflow:hidden; margin:auto; } .div2{ background:url(qingz.jpg) center center no-repeat; background-attachment:fixed; } </style> </head> <body> <div id="main"> <div class="header"> <img src="5.jpg"> </div> <div class="bg-attachment"> <div class="shadow"></div> </div> <div class="header"> <img src="qi.jpg"> </div> <div class="bg-attachment div2"> <div class="shadow"></div> </div> </div> </body> </html>
附帶60多個超炫的視差滾動效果網站設計欣賞：http://www.qianduan.net/60-stunning-parallax-scrolling-effect-website-design.html