先看一下這個demo
上下滾動這個demo頁面(用IE6的可以先一邊去),可以看到圖片有切換的動畫效果,感覺還挺先進的,但其實這個demo的頁面的代碼灰常簡單,就是在幾個div里放幾張背景圖片,然后把背景圖片設為固定就行了。
所以background-attachment:fixed真的是一個很神奇的東西,如果利用得好可以做出很炫的效果。下面就詳細說下background-attachment屬性。
background-attachment的一些說明:
background-attachment -- 定義背景圖片隨滾動軸的移動方式
- 取值: scroll | fixed | inherit
- scroll: 隨着頁面的滾動軸背景圖片將移動
- fixed: 隨着頁面的滾動軸背景圖片不會移動
- inherit: 繼承初始值: scroll
- 繼承性: 否
- 適用於: 所有元素
取值為scroll的時候很好理解,就是背景會隨着滾動條滾動。取值為fixed的時候,意思是固定背景,既然說了是固定,那么固定在哪里呢?這就要由background-position的值來決定了。我們知道background-position的值是相對某個區域來講的,那么background-attachment為fixed的背景的background-position是相對於什么來說的呢,是背景所在的元素嗎?不是,而是相對於瀏覽器視窗來說的,不管這個元素在什么地方,如果它的background-attachment為fixed,則它的背景的位置就與它本身無關了,因為它的背景始終是參照瀏覽器的可見視窗來定位的。當然,如果一個元素在瀏覽器可見視窗以外,但它的背景在瀏覽器視窗里面,那這個背景我們仍然是看不到的,只有這個元素出現在瀏覽器視窗以內,並且能被我們看到,才能看到它的背景。記住一點,background-attachment為fixed的背景永遠不會動,即使元素本身動了,背景卻還是停留在那里,而且它只會在它本來的元素上顯示出來。
絕大多數瀏覽器都支持background-attachment:fixed,但IE6除外。其實六爺也是支持background-attachment:fixed的,只不過不是在所有的元素上都支持,它老人家只在html和body元素上支持。
就這些了,發揮下想象力,真的可以用這貨弄出很洋氣的東西。