CSS background-color 背景顏色 - 網頁設計教學站

CSS background-color 用來設計網頁本身的背景顏色或者是網頁元素（例如 DIV、span）的背景顏色，比起 background-image 要自己製作背景圖片還要簡單，挑選適合的色碼就可以馬上修改背景顏色，在設計的過程可以節省很多工作時間，有些是設計師會先用 background-color 把網頁中各個區塊的顏色先大致設定好，再用 background-image 更換為更為精緻的背景圖片，進一步提升網頁整體的美感，這篇介紹提供幾種不同的 background-color 應用方式給各位參考。

CSS background-color 語法

background-color: 色碼;

色碼的部分可以使用顏色英文單字、RGB 色碼以及十六進位色碼（開啟：色碼表）。

提示、十六進位色碼符號由 # 開頭，接著有六個由英文字母或數字所組成的字串，例如黑色是 #000000、白色是 #FFFFFF、常用的紅色是 #FF0000、常用的藍色是 #0000FF 或 #0000EB，請自己看色碼表上的標示囉！

CSS background-color 範例一、修改 span 背景顏色

紅色的背景顏色
黃色的背景顏色
紫色的背景顏色

呈現結果

紅色的背景顏色黃色的背景顏色紫色的背景顏色

範例一共有三個 span 區域，我們分別用 background-color 替他們加上了背景顏色，第三個 span 的 background-color 參數值 #B800B8 就是紫色系的其中一個十六進位色碼。範例中的《padding》是內距，目的只是讓 span 的邊框與文字不要黏在一起而已，與背景顏色的設計並沒有關係。看到這裡應該對 backgrond-color 的用法蠻熟悉了，若要改變整個網頁的背景顏色呢？看範例二。

CSS background-color 範例二、修改網頁背景顏色

<html>
<head>
<title>網頁標題</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="description" content="">
</head>
<body style="background-color:#C9FFC9;">
... 這裡是網頁內容 ...
</body>
</html>

範例二並沒有提供呈現效果，因為是修改整個網頁的背景顏色，你可以把範例二中的程式碼複製起來貼到一個空白文件，並存成 test.html，接著用瀏覽器打開看看，背景顏色應該是#C9FFC9這個顏色。

CSS background-color 範例三、替 img 增加背景顏色

呈現結果（故意不放圖片）

範例三替圖片增加了背景顏色，可能會有人產生疑問，為什麼要幫圖片增加背景顏色？這個答案很簡單，有的時候，網頁設計師會用具有透明效果的圖片，搭配背景顏色來呈現特殊的風格，這時候 background-color 就顯得相當重要嚕！第二種情況是，當圖片沒有正常顯示的時候，至少還有背景顏色可以檔一檔，畫面才不會太過難看，若是為了這種需求，記得要把圖片的寬度與高度寫好。

延伸閱讀