CSS: background-attachment

background-attachment可以設定背景圖片、文字與viewport的關係，有三個屬性。

fixed

.box{
	background-attachment: fixed;
}

背景會被固定在viewport上，意及不管怎麼滾動網頁，背景圖都不會改變。

local

.box{
	background-attachment: local;
}

外層網頁在滾動的時候內層背景與內文會跟著滾動，滾動內層元素的時候背景與內文也會跟著移動(背景被固定在內文的位置)。

scroll

.box{
	background-attachment: scroll
}

滾動外層網頁時的效果和local相同，但滾動內層的時候只有內文會滾動，背景圖會被固定在viewport上(背景被固定在元素上)。

範例

• 建議使用0.5x觀看

從上到下分別是fixed、local、scroll，最後一個則是因為有兩張背景圖，所以分別設定了scroll和local兩個屬性，這理想示範的是可以同時為不同背景設定不同屬性。