前端工程師CSS基礎功之背景顏色設定

前端工程師CSS基礎功之背景顏色設定


前端工程師利用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 background 背景屬性說明連結
1. 背景顏色設定 (background-color)
2. 背景圖樣設定 (background-image)
3. 背景重複設定 (background-repeat)
4. 背景固定模式設定 (background-attachment)
5. 背景圖片位置設定 (background-position)


參考連結:

前端工程師實用工具CSS之邊框屬性解釋

前端工程師CSS基礎功之背景位置設定

前端工程師CSS基礎功之背景固定模式設定

IT教育產業龍頭達內教育,要和兩大IT產業攜手合作啦!

什麼!?臉書找到了一個雙贏的訓練AI人工智慧的方式?

中國IT教育領導品牌 達內教育集團第一家海外授權中心

達內教育開幕 培養台灣IT人才進入全球企業

全球首屆元宇宙時裝周,複刻20年前的失敗?

全球首屆元宇宙時裝周, 遇到瓶頸 複刻20年前的失敗? 目錄 元宇宙時裝周參與盛況 叫好不叫座?新興技術的行銷瓶頸 由虛擬實境平台 Decentraland 所舉辦的「元宇宙時裝週」(Metaverse Fashion Week...