thinkgeek 網頁的背景效果是怎麼實現的？

http://www.thinkgeek.com/gadgets/tools/e622/

當頁面上線滾動時，背景層不同灰度級的畫面會交替顯現。

---

首先，整個效果，主要只用到body標籤，以及兩個div標籤，3張背景圖。

【html大致如下】

&< body &>

&< div id="wrapper" &>

&< div id="fancywrapper" &>

內容

&< /div &>

&< /div &>

&< /body &>

【三張圖片】

body標籤背景（從黑到灰的漸變圖片）：

http://www.thinkgeek.com/images/sitewide/backgrounds/bodytiletop.jpg

wrapper的背景（從灰到黑的漸變圖片）：

http://www.thinkgeek.com/images/sitewide/backgrounds/bodytilebottom-tall.jpg

fancywrapper的背景（雙色，一灰一黑，透明背景的png圖片）：

http://www.thinkgeek.com/images/sitewide/backgrounds/robozombies7.png

【相關css】

body{

background: #404143;/*這個顏色就是bodytiletop.jpg裡面的最灰色，用以填充頁面中間的背景色*/

background-image: url(bodytiletop.jpg);

background-position: top left;/*設置背景圖位置，居上*/

background-repeat: repeat-x;/*設置背景圖橫向平鋪*/

width: 100%;/*使body標籤寬度與瀏覽器內容區寬度一致*/

}

#wrapper{

background-image: url(bodytilebottom-tall.jpg);

height: 100%;/*讓wrapper保持與body同高*/

background-position: bottom left;/*設置背景圖位置，底部*/

background-repeat: repeat-x;

}

#fancywrapper{

margin: 0px auto;/*居中*/

background-image: url(robozombies7.png);

background-position: center bottom;/*設置背景圖位置，底部*/

background-repeat: repeat-x;

background-attachment: fixed;/*設置背景圖固定在窗口位置，不隨滾動，這是重點*/

height：4500px/*如果是自己做demo，就加個高度，方便看效果*/

}

---

沒猜錯的話背景是由黑色的機器人和飛機組成，同時還有灰色的人頭組成，但在頂部的時候灰色的人頭和背景融合在一起，看不到，當滑到底部時,footer 有一個黑色的漸變，這時候黑色的機器人和飛機與底部的背景融合，而灰色的人頭就顯示出來了...

---

你可以參考下這個:

http://css-tricks.com/video-screencasts/68-think-geek-background-fade-technique/

---

應該是LS說的，有一個固定的背景圖，再就是在上面鋪內容，內容根據位置設置漸變，然後就可以看見上面的效果了。

---

http://www.thinkgeek.com/images/sitewide/backgrounds/robozombies7.png

你看下這個背景圖就明白了啊。有黑色和灰色兩種圖案，頁面滾動到灰色時，黑色圖案可見，滾動到黑色時灰色圖案可見。

---

推薦閱讀：