前端工程師網頁設計初級課程-CSS背景固定模式設定

在前端工程師眼中,背景固定模式設定是很基礎的,一定要認真學一下哦!

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

CSS background-attachment 基本語法如下:

background-attachment: 顯示參數;

其實在CSS設定中,總共有三種可以使用的顯示參數來決定背景圖與網頁主體該以何種方式來搭配顯現,分別為 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. 背景固定模式設定 (background-attachment)
5. 背景圖片位置設定 (background-position)

 

 

 

推薦閱讀:

前端工程師都愛用的CSS,你懂它嗎?

想要善用Class選擇器,聽聽前端工程師怎麼說!

前端工程師.後端工程師究竟誰比較吃香?懶人包分析給你聽!

程式課程選達內,美上市IT課程教育集團

台灣人工智慧APP雅婷逐字稿,讓你省去打字的煩惱!! 轉的精準快又好!!

此網路行銷課程的時代背景跟你想的不一樣

HTML5教學的初學者看過來!你得從這兩樣東西開始!

 


 
arrow
arrow

    jimchen19901212 發表在 痞客邦 留言(0) 人氣()