CSS background-attachment 可決定背景圖片是否要跟著滑鼠滾動而上下移動。有三種不同的呈現方案 前端工程師 可使用:第一種是當滑鼠上下滾動時，背景圖片和網頁主體跟著上下滾動；第二種是當滑鼠上下滾動的時候，背景圖片相對位置會固定不動，呈現的效果就像是網頁主體與背景是分開的；第三種是當滑鼠上下滾動時，背景圖片絕對位置固定不動，網頁主體像是浮在背景圖之上的感覺。 CSS background-repeat 通常與 背景圖樣設定 (background-image) 搭配設計。
CSS background-attachment 基本語法如下：
background-attachment: 顯示參數;
有三種可以使用的顯示參數來決定背景圖與網頁主體該以何種方式來搭配顯示，分別為 scroll（預設值，背景圖案的「相對位置」不會隨著滾動機制而移動，而網頁主體則會跟著滾動）、fixed（背景圖案的「絕對位置」不會隨著滾動機制而移動，而網頁主體則還是會跟著滾動，彷彿網頁主體是浮在整張背景圖之上的感覺。多用於網頁背景圖為滿版的場合時使用）、local（背景圖案與網頁主體都會跟著滾動機制而滾動。以下是針對這三種參數的範例：CSS background-attachment 各種參數的範例
現在新一代的網頁多採滿版設計，其中的「background-attachment: fixed;」參數，常被當代的 前端工程師 搭配「background-repeat: no-repeat;」參數使用，做出網頁主體都浮在高質感的背景圖的效果。
| 其他常用 CSS background 背景屬性說明連結 1. 背景顏色設定 (background-color) 2. 背景圖樣設定 (background-image) 3. 背景重複設定 (background-repeat) 4. 背景固定模式設定 (background-attachment) 5. 背景圖片位置設定 (background-position) |
相關閱讀:
怎麼用程式語言框住文字訊息與圖片?上HTML5教學就會了!
HTML5教學讓網路資訊動起來
HTML5教學與CSS語法:打造美感文字與字形
基礎HTML5教學小訣竅一-初學者可用的免費好上手編輯器!!
今天上的網路設計課程讓我大開眼界!快來看今天我學到什麼新技術!
Python課程帶來的科技日趨進步,多虧這群辛勞的”訓練員”!
別懷疑!人工智慧寫作能力可能比你我還要厲害!!
