用五個小學問做自己想要的CSS背景好簡單!(5)設定背景顏色

用五個小學問做自己想要的CSS背景好簡單!(5)設定背景顏色

用五個小學問做自己想要的CSS背景好簡單!(5)設定背景顏色
用五個小學問做自己想要的CSS背景好簡單!(5)設定背景顏色

除了背景圖樣前端工程師都如何改變背景顏色?這篇讓你一目了然!

使用背景顏色設定 (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背景好簡單!(2)背景位置設定

用五個小學問做自己想要的CSS背景好簡單!(3)背景重複模式

用五個小學問做自己想要的CSS背景好簡單!(4)設定背景圖樣

前端工程師不藏私分享給你設定背景圖樣的小撇步!

我靠六個月的Java課程,輕鬆轉職!

假新聞?人工智慧能馬上寫出新聞或是故事結局?

達內課程先就業再付款- 中時電子報

 

 

 

 

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

這個網站採用 Akismet 服務減少垃圾留言。進一步了解 Akismet 如何處理網站訪客的留言資料