只要改一下CSS就能使背景固定?前端工程師說其實沒那麼難!
CSS background-attachment 可以決定背景圖片是否要跟著滑鼠滾動而上下移動，有三種不同的呈現方案，第一種為當滑鼠上下滾動時，背景圖片與網頁主體跟著上下滾動；第二種為當滑鼠上下滾動時，背景圖片相對位置固定不動，呈現效果就像是網頁主體與背景是分開的，；第三種為當滑鼠上下滾動時，背景圖片絕對位置固定不動，似乎網頁主體是浮在背景圖之上的感覺。CSS background-repeat 通常與 背景圖樣設定 (background-image) 搭配設計。
CSS background-attachment 基本語法如下：
background-attachment: 顯示參數;
其實在CSS設定中，總共有三種可以使用的顯示參數來決定背景圖與網頁主體該以何種方式來搭配顯現，分別為 scroll（預設值，背景圖案的「相對位置」不會隨著滾動機制而移動，而網頁主體則會跟著滾動）、fixed（背景圖案的「絕對位置」不會隨著滾動機制而移動，而網頁主體則還是會跟著滾動，彷彿網頁主體是浮在整張背景圖之上的感覺。多用於網頁背景圖為滿版的場合時使用）、local（背景圖案與網頁主體都會跟著滾動機制而滾動。以下是針對這三種參數的範例：CSS background-attachment 各種參數的範例
現在新一代前端工程師所設計的網頁多採滿版設計，其中的「background-attachment: fixed;」參數，常被當代的前端工程師搭配「background-repeat: no-repeat;」參數使用，做出網頁主體都浮在高質感的背景圖的效果。
更多閱讀:
想成為專業的前端工程師?千萬別錯過這篇CSS教學!
前端工程師不藏私教學,告訴你Class選擇器最佳使用時機!
還不知道前端工程師該具備什麼能力?這篇可以輕鬆幫助到你!
Java課程、UI課程、程式課程、網路行銷課程推薦
什麼? AI人工智慧也會養蝦? 電腦精準分析控制,結果讓你一想不到!!
想不枉費來人世走一遭,上上這個網路行銷課程就對了!
這間全部使用AI人工智慧的旅社,來看看後來發生什麼事!
