close

前端工程師背景設定的小步驟!!

前端工程師背景設定的小步驟!!

 

前端工程師可以使用背景顏色設定 (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)

 

推薦閱讀:

HTML5教學裡的文字攏底在

HTML5教學讓你的網頁更容易被搜尋引擎"了解"

HTML5教學之微數據的格式教學

NOWnews 今日新聞

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

Java課程、UI課程、程式課程、網路行銷課程推薦

達內教育學員見證

arrow
arrow

    uidesignxiaoshow 發表在 痞客邦 留言(0) 人氣()