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

延伸閱讀：

前端工程師設定CSS背景的五種方法(二)背景位置設定

前端工程師設定CSS背景的五種方法(三)設定背景重複顯示

前端工程師設定CSS背景的五種方法(四)設定背景圖樣

透過SEO優化,自己當網站守門員

網路行銷課程-不可不知的SEO優化技巧7:團結相關詞和同義詞!

在家也可以輕鬆學程式?!微軟推出簡易版Python課程軟件!

NOWnews 今日新聞