close

前端工程師的CSS背景顏色基本語法

前端工程師的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 樣式到 HTML 檔案上的4種方式!

想成為前端工程師的第一課-CSS

前端工程師必學課程:CSS的常見邊框屬性解釋

網路行銷課程讓你與主關鍵字搭上邊,增加Google得分

Python課程結合生活,機器人也可以是最佳模仿大王!

網路行銷基礎HTML5教學3-你知道HTML新增了哪些標籤嗎?

Python課程讓我明白,人生中誰都逃不過AI的法眼!

 

arrow
arrow
    創作者介紹
    創作者 Ezra.Yii5778 的頭像
    Ezra.Yii5778

    Java課程是為了今日.Python課程是為了將來

    Ezra.Yii5778 發表在 痞客邦 留言(0) 人氣()