重金屬AI工程師的Coding分享

前端工程師常利用CSS搭配設計網頁,本篇要教你背景顏色設定的語法.

前端工程師 使用 CSS 背景顏色設定 (background-color)屬性，不僅可讓簡潔的純色背景可以襯托出網頁的主體、也可決定網頁的風格。像是背景純黑的網頁與背景為粉紅色的網頁，風格就大不相同。其實 CSS ​​​​​​​background-color 能夠使用的範圍除了網頁背景色外，也可以用來設計表格、DIV 區塊、span 等網頁元素的背景顏色。對此有興趣的 前端工程師 ​​​​​​​不妨可以試試看!

CSS background-color 基本語法如下：

background-color: 顏色名稱或色碼 ;

background-color 可以使用的顏色值包含顏色的英文名稱、十六進位制色碼以及 RGB 色碼，挑選顏色請參考：網頁顏色代碼對照表。

CSS background-color 語法範例一、網頁背景

html{background-color: 顏色名稱或色碼 ;}

See the Pen background-color-bg-example by Tedutw (@Tedutw) on CodePen.

CSS background-color 語法範例二、DIV 區塊、H1-H6 標題等斷落的背景顏色

div(可替換成 h1、p 等網頁元素標籤){background-color: 顏色名稱或色碼 ;}

See the Pen background-color-div-example by Tedutw (@Tedutw) on CodePen.

同樣的技巧還可用在其他的網頁元素，若想採用圖片當成背景，請參閱：2. 背景圖樣設定 (background-image)。

參考連結:

前端工程師法寶CSS之邊框屬性是什麼? ​​​​​​​

前端工程師CSS小學堂之背景位置設定 ​​​​​​​

前端工程師CSS小學堂之背景固定模式設定 ​​​​​​​

前端工程師初學者第一課:CSS代碼特性好簡單! ​​​​​​​

前端工程師初學者第二課:Class選擇器怎麼用? ​​​​​​​

達內教育學員見證 ​​​​​​​

達內教育海外合作企業 ​​​​​​​