前面的話

　　賞心悅目的顏色搭配讓人感到舒服，修改元素顏色的功能讓人趨之若鶩。但顏色規(guī)劃不當(dāng)，會(huì)讓網(wǎng)站用戶無所適從。顏色從<font color="">發(fā)展至今，保留了很多內(nèi)容，也增加了新的內(nèi)容，本文將介紹關(guān)于顏色模式的內(nèi)容

?

顏色模式

　　以前主要采用關(guān)鍵字、16進(jìn)制和RGB這三種設(shè)置顏色的方式。CSS3出現(xiàn)后，增加了RGBA、HSL、HSLA這三種模式，極大地豐富了CSS顏色設(shè)置的方式

關(guān)鍵字

　　CSS顏色關(guān)鍵字包括命名顏色、transparent、currentColor屬性值

命名顏色

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

　　CSS支持17種合法命名顏色(標(biāo)準(zhǔn)顏色):

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

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

transparent

　　color: transparent用來表示文本的顏色純透明，可以近似認(rèn)為是rgba(0,0,0,0)

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

currentColor

　　currentColor顧名思義指當(dāng)前顏色，準(zhǔn)確來講指當(dāng)前的文字顏色

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

16進(jìn)制

　　16進(jìn)制是設(shè)置顏色值的常用方式，將三個(gè)介于00-FF的十六進(jìn)制數(shù)連接起來，若16進(jìn)制的3組數(shù)各自成對(duì)，則可簡(jiǎn)寫為3位

　　#abcdef#aabbcc <=> #abc

<安全顏色>

　　web安全顏色是指在256色計(jì)算機(jī)系統(tǒng)上總能避免抖動(dòng)的顏色，表示為RGB值20%和51(相應(yīng)的16進(jìn)制值為33)的倍數(shù)。因此，采用16進(jìn)制時(shí)，使用00\33\66\99\cc\ff認(rèn)為是Web安全色，一共6*6*6=216種

RGB模式

　　通過組合不同的紅色、綠色、藍(lán)色分量創(chuàng)造出的顏色成為RGB模式的顏色。顯示器是由一個(gè)個(gè)像素構(gòu)成，利用電子束來表現(xiàn)色彩。像素把光的三原色:紅色(R)、綠色(G)、藍(lán)色(B)組合起來。每像素包含8位元色彩的信息量，有0-255的256個(gè)單元，其中0是完全無光狀態(tài)，255是最亮狀態(tài)

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

　　[注意]若數(shù)值小于最小值0,則默認(rèn)調(diào)整為0;若數(shù)值大小最大值255,則默認(rèn)調(diào)整為255

RGBA模式

　　rgba模式是在RGB基礎(chǔ)上增加了alpha通道，用來設(shè)置顏色的透明度，其中這個(gè)通道值的范圍是0-1。0代表完全透明，1代表完全不透明

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

rgba(r,g,b,a)

<IE濾鏡>

　　IE8-瀏覽器對(duì)新增的顏色模式并不支持，需要使用gradient濾鏡。gradient濾鏡的前兩位表示Alpha透明度值(00-ff)，其中00表示全透明，ff表示完全不透明。后六位代表的是RGB模式

　　如果使用#A6DADC并且透明度為0.6的透明色(0.6*255=153，轉(zhuǎn)換成16進(jìn)制是99)，用gradient濾鏡表示為

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

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

HSL模式

　　HSL模式是通過對(duì)色調(diào)(H)、飽和度(S)、亮度(L)三個(gè)顏色通道的變化以及它們相互的疊加得到各式各樣的顏色。HSL標(biāo)準(zhǔn)幾乎可以包括人類視力所能感知的所有顏色

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

hsl(h,s,l)

　　h:色調(diào)(hue)可以為任意整數(shù)。0(或360或-360)表示紅色，60表示黃色，120表示綠色，180表示青色，240表示藍(lán)色，300表示洋紅(當(dāng)h值大于360時(shí)，實(shí)際的值等于該值模360后的值)

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

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

?

HSLA模式

　　HSLA模式是HSL的擴(kuò)展模式，在HSL的基礎(chǔ)上增加一個(gè)透明通道alpha來設(shè)置透明度

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

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

總結(jié)

以上是生活随笔為你收集整理的深入理解CSS六种颜色模式的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。