CSS background-color 背景顏色

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

CSS background-color 語法
background-color: 色碼;
色碼的部分可以使用顏色英文單字、RGB 色碼以及十六進位色碼(開啟:色碼表)。

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

CSS background-color 範例一、修改 span 背景顏色
<span style="background-color:red;padding:5px;">紅色的背景顏色</span>
<span style="background-color:yellow;padding:5px;">黃色的背景顏色</span>
<span style="background-color:#B800B8;padding:5px;">紫色的背景顏色</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 增加背景顏色
<img src="背景圖片" style="background-color:#eeeeee;width:300px;height:80px;">
呈現結果(故意不放圖片)
範例三替圖片增加了背景顏色,可能會有人產生疑問,為什麼要幫圖片增加背景顏色?這個答案很簡單,有的時候,網頁設計師會用具有透明效果的圖片,搭配背景顏色來呈現特殊的風格,這時候 background-color 就顯得相當重要嚕!第二種情況是,當圖片沒有正常顯示的時候,至少還有背景顏色可以檔一檔,畫面才不會太過難看,若是為了這種需求,記得要把圖片的寬度與高度寫好。

延伸閱讀
© Copyright webtech.tw Since 2010