如何固定模式讓前端工程師教你!第一關讓你輕鬆過關,立馬進入狀況! CSS background-attachment 決定背景圖片是否要跟著滑鼠滾動而上下移動,而它有三種不同的呈現方案: 第一種為當滑鼠上下滾動時,背景圖片與網頁主體跟著上下滾動 第二種為當滑鼠上下滾動時,背景圖片相對位置固定不動,呈現效果就像是網頁主體與背景是分開的 第三種為當滑鼠上下滾動時,背景圖片絕對位置固定不動,似乎網頁主體是浮在背景圖之上的感覺。 而 前端工程師 們通常會將CSS background-repeat 與 背景圖樣設定 (background-image) 搭配設計。 CSS background-attachment 基本語法如下: background-attachment: 顯示參數; 而另外,有三種可以使用的顯示參數,來決定背景圖與網頁主體該以何種方式來搭配顯示,分別為 scroll (預設值,背景圖案的「相對位置」不會隨著滾動機制而移動,而網頁主體則會跟著滾動)、 fixed (背景圖案的「絕對位置」不會隨著滾動機制而移動,而網頁主體則還是會跟著滾動,彷彿網頁主體是浮在整張背景圖之上的感覺。多用於網頁背景圖為滿版的場合時使用)、 local (背景圖案與網頁主體都會跟著滾動機制而滾動。以下是針對這三種參數的範例: CSS background-attachment 各種參數的範例 See the Pen background-attachment-example by Tedutw ( @Tedutw ) on CodePen . 現在新一代的網頁多採滿版設計,其中的「background-attachment: fixed;」參數,常被當代的 前端工程師 搭配「 background-repeat: no-repeat; 」參數使用,做出網頁主體都浮在高質感的背景圖的效果。 其他常用 CSS background 背景屬性說明連結 1. 背景顏色設定 (background-color) 2. 背景圖樣設定 (background-image) 3. 背景重複設定 (background-repeat) 4. 背景固定模式設定 (b