如何替 HTML DIV 增加背景顏色

 HTML DIV 區塊除了可以用來排板之外，當然還可以用來美化，只要透過簡單的 CSS 樣式設定就能輕鬆變化出許多好看風格的 DIV 區塊，今天我們要來介紹如何替 HTML DIV 增加背景顏色，在這裡我們會使用到的是 CSS 的 background-color 屬性，這個屬性是 CSS 用來設計或修改網頁本身或網頁元素背景顏色用的標準屬性，先來看看基本的語法。

CSS background-color 屬性語法

background-color: 顏色參數;

其實 background-color 使用方式真的非常簡單，只需要填入想要的顏色參數就能讓網頁元素變更背景顏色，這裡的顏色參數可以是顏色的英文名稱、十六進位的色碼或 RGB 色碼，在這裡我們推薦使用十六進位的色碼，因為操作簡單且顏色變化豐富，想要隨時修改也很便利，Wibibi 提供的網頁色碼表查詢功能很容易上手，網址在這：色碼表 - Wibibi。

再來複習一下 HTML DIV 區塊的語法

<div id="" class="" style="">區塊內容</div>

有了以上的概念，只要把 background-color 屬性與 HTML DIV 區塊兩者融合在一起就能創造出替 HTML DIV 增加背景顏色的效果。

如何替 HTML DIV 增加背景顏色範例

<div style="background-color:purple;">紫色效果的 DIV 背景顏色</div>
<div style="background-color:#FFFF00;">黃色效果的 DIV 背景顏色</div>
<div style="background-color:#00FF00;">綠色效果的 DIV 背景顏色</div>

範例的實際效果

紫色效果的 DIV 背景顏色

黃色效果的 DIV 背景顏色

綠色效果的 DIV 背景顏色

我們寫了三個簡單的範例，全部都使用了 background-color 的效果，差別只在於選用不同的顏色參數，例如紫色（purple）、黃色（#FFFF00）、綠色（#00FF00），其中紫色是直接用英文單字，黃色與綠色都是使用十六進位的色碼來呈現，你也可以自己嘗試用不同的色碼來修改出自己想要的顏色，今天的主題＂如何替 HTML DIV 增加背景顏色＂就介紹到這邊。

延伸閱讀

• HTML DIV 標籤用法
• 如何修改 HTML DIV 區塊內的文字字型
• 如何修改 HTML DIV 區塊內的文字顏色
• 如何在 HTML DIV 區塊內插入圖片
• 如何替 HTML DIV 區塊增加邊框效果
• 如何替 HTML DIV 區塊增加陰影效果
• 如何修改 HTML DIV 區塊內的文字大小