重金屬AI工程師的Coding分享

前端工程師常利用CSS語法進行網頁設計,本篇要教你背景固定模式的設定語法.

CSS background-attachment 決定背景圖片是否要跟著滑鼠滾動而上下移動， 前端工程師 在使用CSS background-attachment 可以有三種不同的呈現方案，第一種為當滑鼠上下滾動時，背景圖片與網頁主體跟著上下滾動；第二種為當滑鼠上下滾動時，背景圖片相對位置固定不動，呈現效果就像是網頁主體與背景是分開的，；第三種為當滑鼠上下滾動時，背景圖片絕對位置固定不動，似乎網頁主體是浮在背景圖之上的感覺。 CSS ​​​​​​​ background-repeat 通常與 背景圖樣設定 (background-image) 搭配設計。

CSS background-attachment 基本語法如下：

background-attachment: 顯示參數;

另外,前端工程師 ​​​​​​​在使用CSS 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;」參數使用，做出網頁主體都浮在高質感的背景圖的效果。

參考連結:

前端工程師基本知識之一:Class選擇器宣告法! ​​​​​​​

前端工程師必備懶人包:網頁顏色代碼對照表 ​​​​​​​

前端工程師的必備知識:ID選擇器宣告法 ​​​​​​​

每個人都Python Python的掛在嘴邊, 他到底是甚麼? ​​​​​​​

前端工程師專欄:CSS套入HTML中的四種方法~ ​​​​​​​

達內教育開幕　培養台灣IT人才進入全球企業 ​​​​​​​

人人都能是工程師！台灣 IT 培訓中心推「找到工作再付學費」專案，要試試嗎？ ​​​​​​​