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	設定背景位置