Java瑪奇朵-非本科系的IT吃喝電玩日誌

今天的前端工程師專欄要來跟大家分享CSS背景顏色設定~ 沒學過的快學起來!! 學過得當複習喔~

前端工程師使用背景顏色設定 (background-color)屬性，可以讓簡潔的純色背景襯托出網頁的主體、也可以決定網頁的風格。像是背景純黑的網頁與背景為粉紅色的網頁，風格就大不相同。其實 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套入HTML中的四種方法~

前端工程師專欄:要如何在HTML和CSS中宣告顏色代碼

前端工程師和後端工程師的差異,想學網頁的你也一定要知道!

你聽過的大企業都投入AI領域,你還不趕緊來個Python課程先?

最好剁手的屈臣氏利用大數據課程提升業績,你還在等什麼呢?

你知道SEO優化最佳幫手的正確打開方式嗎? 看這篇就對了!!

人人都能是工程師！台灣 IT 培訓中心推「找到工作再付學費」專案，要試試嗎？