CSS DIV 背景顏色可以透過 CSS 本身的 background-color 屬性來設計，而且不只是 DIV 背景顏色能使用，網頁中的各種元素都可以使用，因為 background-color 是 CSS 的背景顏色設計標準語法，所以主流的瀏覽器都支援。通常使用 background-color 來設計 DIV 背景顏色時，會需要使用《色碼表》來挑選不同的顏色，直接套用進去 background-color 語法參數即可，以下是幾個 CSS DIV 背景顏色的設計範例。

CSS DIV 背景顏色設計範例範例呈現的效果範例共有三個 DIV 區塊，其中有三個 CSS 屬性，分別為 background-color、padding、以及 margin-bottom，重點在於 background-color 這個用來控制 DIV 背景顏色的屬性，而 padding 僅用來控制內距，margin-bottom 是 DIV 彼此間的距離，也就是所謂的外距，對這幾個基本 CSS 屬性有興趣的朋友，可以閱讀以下幾篇語法解說。

• CSS padding 內距屬性與用法範例
• CSS margin 屬性與用法範例

我們回到 DIV 背景顏色的地方，各位可以注意到，每個 DIV 的 background-color 所用的色碼都不一樣，例如 #FFD382、#82FF82... 這些都是十六進位的色碼，每一種色碼僅代表一種顏色，這些色碼就是控制 DIV 背景顏色的主要關鍵，可以從本站的《色碼表》挑選不同顏色。

如果想要進一步的了解 background-color 屬性，請詳閱《CSS background-color 背景顏色》篇幅的介紹。另外，單純的背景顏色不夠滿足網頁精緻風格，可以考慮使用背景圖片，請參閱：CSS DIV 背景圖片。

延伸閱讀

• CSS DIV 區塊標籤的使用教學
• CSS DIV 置中
• CSS DIV 寬度與高度的設定

您可能會想看

• CSS span 區域文字字型設計
• CSS span 區域邊框顏色與樣式設計
• CSS span 區域背景顏色設計
• CSS display:inline-block 效果
• CSS a 連結樣式效果設計
• 用 CSS 設計出三角形圖案
• CSS display 屬性
• CSS box model 盒子模型
• CSS list-style 列表屬性
• 用 CSS 設計 HTML button 按鈕大小

今日熱門文章

• 認識 PHP8 的基本結構與語法
• Notepad++ 簡介及下載安裝，非常適合寫 PHP 的程式碼編輯器
• 選擇 PHP 程式碼編輯軟體
• 在 Windows 11 上安裝 XAMPP 建置 PHP 開發環境
• PHP8 簡介
• 用 javascript let 宣告變數跟 var 有什麼不同？
• javascript 三個等號 === 是什麼意思？跟兩個等號有什麼不同？
• MySQL SELECT WHERE date 等於上個月的條件判斷寫法
• MySQL SELECT WHERE date 等於本月的條件判斷寫法
• MySQL SELECT WHERE date 等於昨天的條件判斷寫法

即時熱門文章

• 認識 PHP8 的基本結構與語法
• Notepad++ 簡介及下載安裝，非常適合寫 PHP 的程式碼編輯器
• 選擇 PHP 程式碼編輯軟體
• 在 Windows 11 上安裝 XAMPP 建置 PHP 開發環境
• PHP8 簡介
• 用 javascript let 宣告變數跟 var 有什麼不同？
• javascript 三個等號 === 是什麼意思？跟兩個等號有什麼不同？
• MySQL SELECT WHERE date 等於上個月的條件判斷寫法
• MySQL SELECT WHERE date 等於本月的條件判斷寫法
• MySQL SELECT WHERE date 等於昨天的條件判斷寫法