css新的顏色表示實用

會計學1css新的顏色表示實用CSS1&CSS2的顏色方式Colorname顏色名稱方式HEX方式

十六進制方式RGB方式

三原色配色方式第1頁/共18頁ColorName方式用顏色關(guān)鍵字表示對應的顏色。例如:red(紅色)、blue(藍色)、pink(粉色)優(yōu)點：方便快捷而且特定顏色比較準確缺點：英文記憶很是個問題

表示顏色數(shù)量有限。

不支持透明顏色.

第2頁/共18頁HEX方式十六進制記法，使用十六進制表示顏色語法:#RRGGBB或#RGB取值：RR：紅色值。十六進制正整數(shù)GG：綠色值。十六進制正整數(shù)BB：藍色值。十六進制正整數(shù)取值范圍:00-FF第3頁/共18頁

例如:#FF0000紅色#FFFF00黃色。優(yōu)點：表示顏色種類多，使用較方便缺點：16進制單位換算很成問題

不支持透明顏色。

特定顏色需要工具配合或者一定的顏色調(diào)配知識第4頁/共18頁RGB方式RGB記法。語法:RGB(R,G,B)取值：R：紅色值。正整數(shù)|百分數(shù)G：綠色值。正整數(shù)|百分數(shù)B：藍色值。正整數(shù)|百分數(shù)取值范圍:0~255或者0%~100%第5頁/共18頁

例如:rgb(255,0,0)紅色rgb(255,255,0)黃色優(yōu)點：表示顏色種類多，使用較方便缺點：

不支持透明顏色

特定顏色需要工具配合或者一定的顏色調(diào)配知識第6頁/共18頁CSS3新增顏色表示方式RGBA模式HSL模式HSLA模式第7頁/共18頁RGBA模式RGBA記法。此色彩模式與RGB相同，只是在RGB模式上新增了Alpha透明度。語法：RGBA(R,G,B,A)取值：R：紅色值。正整數(shù)|百分數(shù)G：綠色值。正整數(shù)|百分數(shù)B：藍色值。正整數(shù)|百分數(shù)A：Alpha透明度。取值0~1之間。

例如:rgba(255,0,0.5)半透明紅色第8頁/共18頁HSL模式HSL記法。

(色輪模式)語法:HSL(H,S,L)取值：H：Hue(色調(diào))。0(或360)表示紅色，120表示綠色，240表示藍色，也可取其他數(shù)值來指定顏色。取值為：0-360S：Saturation(飽和度)。取值為：0.0%-100.0%L：Lightness(亮度)。取值為：0.0%-100.0%

例如:hsl(360,50%,50%)紅色第9頁/共18頁第10頁/共18頁HSLA模式HSL記法。

(色輪模式)語法:HSLA(H,S,L,A)取值：H：Hue(色調(diào))。0(或360)表示紅色，120表示綠色，240表示藍色，也可取其他數(shù)值來指定顏色。取值為：0-360S：Saturation(飽和度)。取值為：0.0%-100.0%L：Lightness(亮度)。取值為：0.0%-100.0%A：Alpha透明度。取值0~1之間。

例如:hsl(360,50%,50%,0.5)紅色第11頁/共18頁transparent特殊顏色值,表示透明色。可以直接當做顏色使用。例如：color:transparent

設定字體顏色為透明第12頁/共18頁Opacity屬性作用：設定元素的透明度。取值：0~1之間注意：對于尚不支持opacity屬性的IE瀏覽器濾鏡：filter:alpha(opacity=50)僅限IE