css background-color 背景顏色 - CSS 學習筆記

css background-color 是用來修改網頁本身以及網頁元素背景顏色的標準屬性，例如網頁本身的背景顏色可以在 body 標籤內使用 background-color 設計出獨具風格的網頁背景顏色，也可以在 DIV 區塊或 span 區域內使用 background-color 調整出不同的網頁元素背景顏色，用法相當的簡單，而且幾乎所有常用的知名瀏覽器（Web Browser）都支援 background-color 屬性。

css background-color 背景顏色基本語法

background-color:color code;

語法規則中的 color code 可以是 RGB 色碼、十六進位色碼或是直接填寫顏色的英文單字，你可以在《Wibibi 色碼表》挑選適合的十六進位色碼來用，變化出不同的背景顏色效果。

範例一、用 css background-color 修改 DIV 區塊的背景顏色

呈現結果

DIV 區塊背景顏色修改範例

用 background-color 修改 DIV 區塊的背景顏色是使用頻率非常高的一種技巧，因為用法非常的簡單，直接在開頭 DIV 標籤內使用即可，顏色的挑選可以從上一段的十六進位色碼表找出適合的顏色，範例中額外使用了 padding 的屬性，目的是要讓文字與 DIV 邊框有一點距離而已，看起來比較清楚，跟 background-color 沒有什麼關係，純粹是好看。

如果對 DIV 區塊還不是很了解，請參閱這篇的說明：CSS DIV 區塊。

範例二、用 css background-color 修改 HTML 表格背景顏色

呈現結果

表格欄位

其實 HTML Table 本身也有一個叫做 bgcolor 的屬性可以用來修改表格背景顏色，不過該屬性已經蠻老舊的，新一代的網頁設計技巧普遍改用 css 的 background-color 取代 bgcolor，只要是因為整合其他網頁內容的 css 會更便利，範例中只在 table 開頭標籤內使用 background-color，這樣會改變整個表格的背景顏色，其實每個欄位也都可以使用 background-color 分別修改欄位的背景顏色唷！關於更詳細的 HTML 表格設計語法以及欄位背景顏色的修改技巧，可以參閱這幾篇的介紹。

css background-color 的應用範圍相當廣泛，不只是單純用在範例的這幾個地方，舉凡網頁中的諸多元素如 span、img、body ... 等，幾乎都可以使用 background-color 做修改。

單純的背景顏色無法滿足網頁對精緻度要求的時候，可以考慮用背景圖片的呈現方式來提升整體視覺效果，在 css 的世界裡，設計背景圖片使用的是 background-image 屬性，請參閱這一篇的詳細介紹：CSS background-image 背景圖片。