CSS background-attachment

CSS background-attachment 的功能，可以用來決定背景圖片是否要跟著滑鼠滾動而上下移動，有兩種不同的呈現方案，第一種為當滑鼠上下滾動時，背景圖片跟著上下滾動，第二種為當滑鼠上下滾動時，背景圖片固定不動，呈現效果就像是網頁主體與背景是分開的，似乎網頁主體是浮在背景圖之上的感覺，background-attachment 通常會與背景圖片（background-image）搭配設計。

CSS background-attachment 基本語法

background-attachment: 顯示參數;

基本語法中顯示參數可選擇的值為 scroll 以及 fixed，如下表所示。

參數	定義
scroll	預設值，背景圖片會隨著滑鼠滾動而上下移動。
fixed	背景圖片固定不動，滑鼠上下滾動僅會移動網頁主體。

CSS background-attachment 範例

body{
　background-image:url(圖片網址);
　background-attachment:fixed;
}

以上範例語法中，你給的圖片將會固定不動，無論網頁怎麼拉動，圖片就是固定在你設定的位置上。偶爾設計師也會搭配 background-repeat 的效果，來設計背景圖片不重覆顯示的風格，所有的主流瀏覽器都支援 background-attachment 效果。

background-attachment 效果與 JavaScript 中的 object.style.backgroundAttachment="fixed" 一樣。

延伸閱讀