取值: scroll | fixed | inherit
scroll: 隨著頁面的捲軸背景圖片將移動
fixed: 隨著頁面的捲軸背景圖片不會移動
inherit: 繼承
初始值: scroll
繼承性: 否
適用於: 所有元素
background:背景.attachment:附著.
樣本
body {background-image:url('list-orange.png');background-attachment:fixed;background-repeat:repeat-x;background-position:center center;}
螢幕的背景圖片為一條橙色線.隨著捲軸移動,橙色線的視覺位置不變.
CSS background-attachment 屬性樣本 -- 可以嘗試編輯
CSS background-attachment 屬性樣本
視差滾動（Parallax Scrolling）是指讓多層背景以不同的速度移動，形成立體的運動效果，帶來非常出色的視覺體驗。作為今年網頁設計的熱點趨勢，越來越多的網站應用程式了這項技術。
不明白的可以先看看eBay上的效果：http://www.ebay.com/new/
其實就是固定背景不讓它隨著捲軸移動，但包含背景的容器是跟著滾動的，所造成的視覺差異看起來就像跟轉換情境一樣。（這個解釋別嫌混亂…）
在CSS中定義背景滾動方式的屬性是backgroud-attacthment
background-attachment -- 定義背景圖片隨捲軸的移動方式
取值: scroll | fixed | inherit
scroll: 預設值。背景映像會隨著頁面其餘部分的滾動而移動。
fixed: 當頁面的其餘部分滾動時，背景映像不會移動。
inherit: 規定應該從父元素繼承 background-attachment 屬性的設定。
初始值: scroll
繼承性: 否
適用於: 所有元素
瀏覽器的支援性：
測試了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>Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
