首頁 部落格 常見背景屬性(一)
Karen
Nov 07, 2017
iware的前端設計,喜歡音樂,喜歡閱讀,喜歡悠閒地下午配著音樂來本書

常見背景屬性(一)


在網頁設計中,背景佔有非常重要的位置,背景的不同網頁的整體感覺、氛圍都會有非常大的改變,而在背景的撰寫上也有許多不同的屬性應用。

Background-color

顏色名稱

大部分瀏覽器都支持顏色名稱

CSS中定義了140個顏色的名稱。點此查看所有瀏覽器支持的顏色名稱

See the Pen background-color1 by karen (@karen0922) on CodePen.

十六進位的顏色

大部分瀏覽器都支持十六進制顏色值

十六進制顏色用法為:#RRGGBB

其中RR代表紅色,GG代表綠色,BB代表藍色,所有值都必須在00和FF之間。

See the Pen background-color2 by karen (@karen0922) on CodePen.

RGB和RGBA顏色 

RGB

大部分瀏覽器都支持RGB顏色值

RGB顏色為rgb(),三個數值去定義顏色,數值為0到255之間的整數或是百分比值,數值越高顏色所佔的比重越多。

RGBA

瀏覽器在IE9 +,Firefox 3 +,Chrome,Safari和Opera 10+支援RGBA的使用。

RGBA前三個數值跟RGB使用方式相同,差別在最後多一個alpha值,用以指定透明程度,參數介於0.0(完全透明)到1.0(完全不透明)之間。

See the Pen background-color3 by karen (@karen0922) on CodePen.

Hsl和 Hsla顏色

HSL

瀏覽器在IE9 +,Firefox,Chrome,Safari和Opera 10+支持HSL的使用。

HSL顏色值為(色相飽和度亮度)三個數值去定義顏色。

色相(H)是色彩的基本屬性,就是顏色名稱,如紅色、黃色等,用0到360表示。0度為紅色,120度為綠色,240度為藍色。

飽和度(S)是指色彩的純度,取0%到100%的數值,數字越大色彩越純,越小則逐漸變灰。

亮度(L)是指色彩的明亮程度,取0%到100%,數字越大越亮,越小越暗。

HSLA

瀏覽器在IE9 +,Firefox,Chrome,Safari和Opera 10+支持HSLA的使用。

HSLA前三個數值跟HSL使用方式相同,差別在最後多一個alpha值,用以指定透明程度,參數介於0.0(完全透明)到1.0(完全不透明)之間。

See the Pen background-color4 by karen (@karen0922) on CodePen.

以上是背景純色的使用介紹,光是純色就有這麼多種應用方法,不同的寫法可以應用在各個不同的地方,之後會介紹更多其他屬性的介紹。

 

2018網頁設計趨勢
2018網頁設計趨勢
Ryan
Ryan
Dec 15, 2017
IWARE官網改版紀錄(上)
IWARE官網改版紀錄(上)
Winnie
Winnie
Nov 10, 2017
常見背景屬性(二)
常見背景屬性(二)
Karen
Karen
Nov 20, 2017