CSS background 背景

CSS background 背景屬性是網頁設計相當重要的一環,也是網頁整體風格呈現的基礎,在 CSS background 背景設計系列中,包含許多重要屬性,例如用來設計網頁背景顏色的 background-color、顯示背景圖片的 background-image、設定背景位置的 background-position 等,都是許多設計師常用到的屬性,熟悉這些屬性後,就能夠很輕鬆的設計出單純色彩的網頁背景風格,也可以搭配高質感網頁背景圖片來呈現整體網頁視覺效果,以下將幾個常用的 CSS background 背景設計屬性,分段做簡單介紹。

CSS background-color 背景顏色範例
<div style="background-color:#FFBB73">CSS background-color 色碼測試</div>
<div style="background-color:pink">CSS background-color 顏色英文單字測試</div>
<div style="background-color:rgb(232,106,192)">CSS background-color RGB 測試</div>
範例呈現結果如
CSS background-color 色碼測試
CSS background-color 顏色單字測試
CSS background-color RGB 測試
背景顏色可以說是網頁設計時,用來提升畫面品質,非常簡單又有效的技巧,簡單的背景顏色可以襯托出網頁主體的特色,設計出簡約同時又具有高質感的網頁,。其實 background-color 能夠使用的範圍不僅止於網頁背景的顏色,也可以用來設計其他網頁元素的背景顏色,例如表格DIV 區塊span ... 等,都可以應用這樣的技巧,豐富元素的風格,挑選顏色請用:色碼表

CSS background-image 背景圖片語法

background-image:url(' 背景圖片網址 ');


background-image 用來為網頁插入背景圖片,安置圖片的位置通常會搭配 background-position 使用,使用圖片背景的好處是頁面可以更加豐富,適宜的背景圖片搭配網頁主體,可以呈現出相當高檔的網頁設計水準,這樣的品質需要設計師更聚精會神工作,使用圖片當背景需要注意在各種平台顯示效果,如螢幕大小的差別、使用手機或平板電腦等行動裝置的瀏覽體驗,背景圖片是否能夠與網頁主體正確搭配,都是設計師需要注意的細節,另外,背景圖片盡量不要過於突出,避免出現喧賓奪主的失誤,詳細用法請參閱:background-image

CSS background-position 背景位置

background-position: 水平方向參數或垂直方向參數 ;


background-position 最主要的功能就是設定背景圖片的位置,可以分別設定水平方向的位置或垂直方向的位置,通常為了能夠讓背景圖片固定在一個位置,會與 background-attachment 屬性做搭配設計,詳細的語法與範例請參閱:background-position

CSS background-attachment 背景圖片固定

background-attachment: 屬性參數


background-attachment 的功能是用來設定背景圖片是否固定,也就是當滑鼠上下瀏覽網頁時,背景圖片是否需要跟著移動,這個屬性僅有兩個參數,分別為預設的 scroll 以及 fixed,其中 scroll 代表背景圖會跟著移動,而 fixed 則代表背景圖片會固定住,不隨著網頁瀏覽而改變位置,詳細的語法與範例請參閱:background-attachment

以下常用屬性表都是 CSS background 系列非常基礎的背景設計功能,可以單獨使用或者是混搭著使用,變化出不同的背景風格,特別是如果使用了圖片做為背景,則 repeat、attachment、position 混搭起來設計,通常會是比較完整的執行方案。

常用 CSS background 背景屬性表
屬性功能
background-color設定背景顏色
background-image設定背景圖片
background-repeat設定背景圖片的重複顯示與重複的方向
background-attachment設定背景圖片固定或跟著滾動
background-position設定背景位置
© Copyright wibibi.com 網頁設計教學百科 基礎的網頁設計規劃、資料庫與程式設計 Since 2012
PHP Smarty MySQL JQuery Apache W3C