有幾種方法可以在CSS中定義顏色值。
彩色關(guān)鍵字是不區(qū)分大小寫(xiě)的標(biāo)識(shí)符,該標(biāo)識(shí)符表示特定的顏色,例如red,green,blue,yellow,black等。
h1 { color: red; } p { background-color: yellow; }測(cè)試看看?/?
警告:對(duì)顏色關(guān)鍵字的支持因?yàn)g覽器而異,因此,為了安全起見(jiàn),最好使用十六進(jìn)制或功能符號(hào)。
查看顏色關(guān)鍵字的完整列表
transparent關(guān)鍵字表示完全透明的顏色。
該關(guān)鍵字可以視為透明黑色的簡(jiǎn)寫(xiě)形式rgba(0,0,0,0),也是它的計(jì)算值。
h1 { color: transparent; } p { background-color: transparent; }測(cè)試看看?/?
注意: CSS 2.1僅允許兩個(gè)屬性,background-color和border-color接受transparent關(guān)鍵字。但是,CSS3擴(kuò)展了顏色值以包括transparent關(guān)鍵字,以允許其與接受顏色值的所有屬性一起使用。
RGB(紅綠藍(lán))顏色模型是在CSS中定義顏色值的最常用方法??梢允褂肦GB模型以兩種方式定義顏色:
十六進(jìn)制表示法的RGB值#由緊隨其后的三個(gè)或六個(gè)十六進(jìn)制字符(0-9,af)的字符組成。
當(dāng)使用六位符號(hào)(#rrggbb)時(shí),第一對(duì)(rr)代表紅色值,第二對(duì)(gg)代表綠色值,最后一對(duì)(bb)代表藍(lán)色值。
h1 { color: #f80; } p { background-color: #ff8800; }測(cè)試看看?/?
提示:三位十六進(jìn)制表示法(#rgb)可以通過(guò)復(fù)制數(shù)字而不是加零來(lái)轉(zhuǎn)換為六位形式(#rrggbb)。 例如:#03f可以擴(kuò)展為#0033ff,但是兩個(gè)值表示相同的顏色。
函數(shù)表示法中的RGB值指定為:rgb(red, green, blue)。其中,每個(gè)參數(shù)(red,green和blue)定義顏色的強(qiáng)度,可以是一個(gè)整數(shù)值(從0到255)或一個(gè)百分比值(從0%到100%)。
整數(shù)值255對(duì)應(yīng)100%,十六進(jìn)制表示法中的f或ff:例如,rgb(0,255,255) = rgb(0%,100%,100%) = #0ff,所有值表示相同的顏色,即aqua。數(shù)值周圍允許有空白。
h1 { color: rgb(0,255,255); } p { background-color: rgb(0%,100%,100%); }測(cè)試看看?/?
值0或0%表示不存在特定顏色值,而值255、100%和f或ff表示該顏色值完全存在。
注意:超出有效范圍(0-255或0%-100%)的值將被自動(dòng)裁剪或更改為設(shè)備支持的范圍內(nèi)。
查看有關(guān)CSS3顏色的教程,以了解新的功能符號(hào)(例如)rgba(),hsl()以及hsla()用于定義顏色值的信息。