著色
方法一:十六進(jìn)制
如:#3E8988 伸蚯、 #6600FF等等
其中,如果兩兩相同,可以簡寫
如:#6600FF 可以簡寫成 #60F
方法二:RGB(Red揩魂,Green,Blue)
這種顏色值由3個(gè)數(shù)組成炮温,每個(gè)數(shù)各代表一種色相(紅火脉、綠、藍(lán))柒啤,每個(gè)值可以使用百分百(0%100%)表示倦挂,也可以使用0255之間的數(shù)字表示。
如果想設(shè)置白色担巩,可以使用:
rgb(100%, 100%, 100%);
或者
rgb(255, 255, 255);
方法三:使用HTML傳統(tǒng)的顏色關(guān)鍵字(不建議經(jīng)常使用)
顏色關(guān)鍵字有17個(gè):
aqua方援、black、blue涛癌、fuchsia犯戏、gray、green祖很、lime笛丙、maroon、navy假颇、olive胚鸯、orange、purple笨鸡、red姜钳、silver、teal形耗、white哥桥、yellow。
除此之外激涤,大多數(shù)瀏覽器都支持SVG標(biāo)準(zhǔn)定義的147個(gè)顏色拟糕。
顏色關(guān)鍵字列表:
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多了一個(gè)alpha通道辱挥,這個(gè)通道的作用是設(shè)定不透明度犁嗅。
設(shè)定不透明度的方法是,在RGB顏色后面再加一個(gè)介于0和1之間的數(shù)字晤碘。
0表示顏色不可見褂微,1表示顏色完全不透明(即功蜓,光線穿不透)。
color: rgba(255, 10, 20, .5)
這里的 .5 代表 0.5 的意思宠蚂,0可以省略不寫式撼。
不過RGBA有一個(gè)缺點(diǎn),就是 Internet Explorer 8 以及之前的版本都不支持肥矢。這個(gè)問題的解決方法是端衰,先使用RGB設(shè)定實(shí)心顏色,再使用RGBA設(shè)定透明顏色甘改。
color: rgb(255, 10, 20); /* 針對 IE8 以及更早的版本 */
color: rgba(255, 10, 20, .5); /* 針對較新的瀏覽器 */
方法5:HSL和HSLA(用得較少,也不那么好理解)
HSL(Hue灭抑,Saturation十艾,Lightness),Lightness有時(shí)也用Luminance表示腾节。
IE8及之前的版本不支持HSL忘嫉,不過其他所有瀏覽器都支持。
hsl() 有三個(gè)值案腺,
第一個(gè)值是角度庆冕,取值范圍是0~360,對應(yīng)色相圓劈榨。
紅色的色相是0(也是360访递,因?yàn)槔@完一周又回到原點(diǎn)),
黃色的色相值大約是50同辣,
橙色大約是100拷姿,
綠色大約150,
一次類推旱函,彩虹七色的色相之間大概相隔51度响巢。
第二個(gè)值是飽和度,即顏色的純度棒妨,取值范圍是0%~100%踪古。
0%表示完全不飽和,即暗灰券腔。
100%表示純色伏穆,鮮艷明亮。
其實(shí)不管色相(HSL的第一個(gè)值)是多少颅眶,只要飽和度為0%蜈出,得到的都是同樣的灰度。
第三個(gè)值是亮度涛酗,取值范圍是0%~100%铡原。
0%表示全黑偷厦。
100%表示全白。
如果想活的純色燕刻,亮度要設(shè)為50%只泼。
HSLA的A的使用方法和RGBA的A的使用方法差不多,在HSL后面加多一個(gè)Alpha值卵洗。
透明
transparent
這個(gè)值能把要設(shè)置的內(nèi)容變成絕對透明
如:
color: transparent;
opacity
這個(gè)方法能控制透明度
如:
background: red;
opacity: 0.5;
opacity可以控制整個(gè)元素的透明度请唱。如
div {
background-color: red;
color: blue;
opacity: 0.5;
filter:Alpha(opacity=50);
}
這時(shí),div的背景色过蹂,字體顏色的透明度都變成50%十绑,
filter:Alpha(opacity=50);
這句的作用是針對 IE8 以及更低版本的瀏覽器做兼容。
推薦網(wǎng)址:
http://hslpicker.com
www.colorlovers.com
http://paletton.com
HTML與CSS 目錄:HTML與CSS
下一篇:【CSS】背景基礎(chǔ)知識