CSS語法 網頁設計

前端工程師必學!CSS背景固定模式設定

2019-03-29

前端工程師必學-CSS background-attachment設定!

前端工程師必學-CSS background-attachment設定!
前端工程師必學-CSS background-attachment設定!

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. 背景固定模式設定 (background-attachment)
5. 背景圖片位置設定 (background-position)

相關閱讀:

HTML5教學解碼網頁區塊圖和表格

認真上HTML5教學,踏足出版業就業路更寬廣

HTML5教學上完還不夠,加強CSS語法讓你的網站獨樹一格

人人都在玩3D虛擬人偶APP,網路行銷課程告訴你為什麼!!

人工智慧研究企業特斯拉,已退出Open AI

用電影來預言將來誰是贏家?Python課程讓你大開眼界!

廣達以開發Python課程當領頭羊,業績好的不得了啊!

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

這個網站採用 Akismet 服務減少垃圾留言。進一步瞭解 Akismet 如何處理網站訪客的留言資料