經典背景音樂

2022年3月12日 星期六

如何替 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 增加背景顏色"就介紹到這邊。

延伸閱讀

沒有留言: