深刻理解CSS六種顏色模式

前面的話

　　賞心悅目的顏色搭配讓人感到舒服，修改元素顏色的功能讓人趨之若鶩。但顏色規劃不當，會讓網站用戶無所適從。顏色從<font color="">發展至今，保留了不少內容，也增長了新的內容，本文將介紹關於顏色模式的內容

 

顏色模式

　　之前主要採用關鍵字、16進制和RGB這三種設置顏色的方式。CSS3出現後，增長了RGBA、HSL、HSLA這三種模式，極大地豐富了CSS顏色設置的方式

關鍵字

　　CSS顏色關鍵字包括命名顏色、transparent、currentColor屬性值

命名顏色

　　直接使用的名字的顏色值稱爲命名顏色

　　CSS支持17種合法命名顏色(標準顏色):

aqua fuchsia lime olive red white black gray maroon orange silver yellow blue green navy purple teal

　　[注意]瀏覽器支持140種顏色

transparent

　　color: transparent用來表示文本的顏色純透明，能夠近似認爲是rgba(0,0,0,0)

　　[注意]IE7-不支持color:transparent，但支持background-color: transparent和border-color: transparent

currentColor

　　currentColor顧名思義指當前顏色，準確來說指當前的文字顏色

　　[注意]IE8-不支持該屬性值

16進制

　　16進制是設置顏色值的經常使用方式，將三個介於00-FF的十六進制數鏈接起來，若16進制的3組數各自成對，則可簡寫爲3位

　　#abcdef
　　#aabbcc <=> #abc

<安全顏色>

　　web安全顏色是指在256色計算機系統上總能避免抖動的顏色，表示爲RGB值20%和51(相應的16進制值爲33)的倍數。所以，採用16進制時，使用00\33\66\99\cc\ff認爲是Web安全色，一共6*6*6=216種

RGB模式

　　經過組合不一樣的紅色、綠色、藍色份量創造出的顏色成爲RGB模式的顏色。顯示器是由一個個像素構成，利用電子束來表現色彩。像素把光的三原色:紅色(R)、綠色(G)、藍色(B)組合起來。每像素包含8位元色彩的信息量，有0-255的256個單元，其中0是徹底無光狀態，255是最亮狀態

　　rgb(x%,y%,z%)
　　rgb(a,b,c)

　　[注意]若數值小於最小值0,則默認調整爲0;若數值大小最大值255,則默認調整爲255

RGBA模式

　　rgba模式是在RGB基礎上增長了alpha通道，用來設置顏色的透明度，其中這個通道值的範圍是0-1。0表明徹底透明，1表明徹底不透明

　　[注意]IE8-瀏覽器不支持

    rgba(r,g,b,a)

<IE濾鏡>

　　IE8-瀏覽器對新增的顏色模式並不支持，須要使用gradient濾鏡。gradient濾鏡的前兩位表示Alpha透明度值(00-ff)，其中00表示全透明，ff表示徹底不透明。後六位表明的是RGB模式

　　若是使用#A6DADC而且透明度爲0.6的透明色(0.6*255=153，轉換成16進制是99)，用gradient濾鏡表示爲

filter:progid:DXImageTransform.Microsoft.gradient(enabled = 'true',startColorstr="#99A6DADC",endColorstr="#99A6DADC")

　　[注意]IE濾鏡只能兼容背景色，而不能兼容前景色

HSL模式

　　HSL模式是經過對色調(H)、飽和度(S)、亮度(L)三個顏色通道的變化以及它們相互的疊加獲得各式各樣的顏色。HSL標準幾乎能夠包括人類視力所能感知的全部顏色

　　[注意]IE8-瀏覽器不支持

    hsl(h,s,l)

　　h:色調(hue)能夠爲任意整數。0(或360或-360)表示紅色，60表示黃色，120表示綠色，180表示青色，240表示藍色，300表示洋紅(當h值大於360時，實際的值等於該值模360後的值)

　　s:飽和度(saturation)，就是指顏色的深淺度和鮮豔程度。取0-100%範圍的值，其中0表示灰度(沒有該顏色)，100%表示飽和度最高(顏色最鮮豔)

　　l:亮度(lightness)，取0-100%範圍的值，其中0表示最暗(黑色)，100%表示最亮(白色)

 

HSLA模式

　　HSLA模式是HSL的擴展模式，在HSL的基礎上增長一個透明通道alpha來設置透明度

　　[注意]IE8-瀏覽器不支持

    hsla(<length>,<percentage>,<percentage>,<opacity>)