0002.jpg

  著色     

方法一：十六進制

如：#3E8988 、 #6600FF等等
其中，如果兩兩相同，可以簡寫
如：#6600FF 可以簡寫成 #60F

方法二：RGB（Red，Green，Blue）

這種顏色值由3個數組成，每個數各代表一種色相（紅、綠、藍），每個值可以使用百分百（0%_{100%）表示，也可以使用0}255之間的數字表示。

如果想設置白色，可以使用：
rgb(100%, 100%, 100%);
或者
rgb(255, 255, 255);

方法三：使用HTML傳統的顏色關鍵字（不建議經常使用）

顏色關鍵字有17個：
aqua、black、blue、fuchsia、gray、green、lime、maroon、navy、olive、orange、purple、red、silver、teal、white、yellow。

除此之外，大多數瀏覽器都支持SVG標準定義的147個顏色。

顏色關鍵字列表：
http://developer.mozilla.org/en-US/docs/Web/CSS/color_value

按色相分類的顏色列表：
http://html-color-codes.info/color-names/

方法四：RGBA（Red，Green，Blue，Alpha）

相比起RBG，RGBA多了一個alpha通道，這個通道的作用是設定不透明度。
設定不透明度的方法是，在RGB顏色后面再加一個介于0和1之間的數字。
0表示顏色不可見，1表示顏色完全不透明（即，光線穿不透）。

color: rgba(255, 10, 20, .5)

這里的 .5 代表 0.5 的意思，0可以省略不寫。

不過RGBA有一個缺點，就是 Internet Explorer 8 以及之前的版本都不支持。這個問題的解決方法是，先使用RGB設定實心顏色，再使用RGBA設定透明顏色。

color: rgb(255, 10, 20);    /* 針對 IE8 以及更早的版本  */
color: rgba(255, 10, 20, .5);    /* 針對較新的瀏覽器 */

方法5：HSL和HSLA（用得較少，也不那么好理解）

HSL（Hue，Saturation，Lightness），Lightness有時也用Luminance表示。
IE8及之前的版本不支持HSL，不過其他所有瀏覽器都支持。

hsl() 有三個值，
第一個值是角度，取值范圍是0~360，對應色相圓。
紅色的色相是0（也是360，因為繞完一周又回到原點），
黃色的色相值大約是50，
橙色大約是100，
綠色大約150，
一次類推，彩虹七色的色相之間大概相隔51度。

第二個值是飽和度，即顏色的純度，取值范圍是0%~100%。
0%表示完全不飽和，即暗灰。
100%表示純色，鮮艷明亮。
其實不管色相（HSL的第一個值）是多少，只要飽和度為0%，得到的都是同樣的灰度。

第三個值是亮度，取值范圍是0%~100%。
0%表示全黑。
100%表示全白。
如果想活的純色，亮度要設為50%。

HSLA的A的使用方法和RGBA的A的使用方法差不多，在HSL后面加多一個Alpha值。

 透明     

transparent
這個值能把要設置的內容變成絕對透明

如：

color: transparent;

opacity
這個方法能控制透明度

如：

background: red;
opacity: 0.5;

opacity可以控制整個元素的透明度。如

div {
    background-color: red;
    color: blue;
    opacity: 0.5;
    filter:Alpha(opacity=50);
}

這時，div的背景色，字體顏色的透明度都變成50%，

filter:Alpha(opacity=50);
這句的作用是針對 IE8 以及更低版本的瀏覽器做兼容。

HTML與CSS 目錄：HTML與CSS

上一篇：讓舊瀏覽器接受HTML5的語義標簽

下一篇：【CSS】背景基礎知識