常見背景屬性(一)

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

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.

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