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" 一樣。

延伸閱讀
© Copyright wibibi.com 網頁設計教學百科 基礎的網頁設計規劃、資料庫與程式設計 Since 2012