CSS3

CSS3 知识量:11 - 43 - 138

6.3 CSS3颜色模式><

RGBA颜色模式- 6.3.1 -

RGBA模式在RGB的基础上增加了alpha通道,用于设置颜色的透明度。其语法为:

rgba(r,g,b,a)

参数简要说明如下:

  • R:红色值,取值可以是正整数或百分比。

  • G:绿色值,取值同上。

  • B:蓝色值,取值同上。

  • A:alpha透明值,取值在0~1范围内。

以上R、G、B三个参数,其正整数取值范围具体为0~255之间;百分比取值范围为0~100%之间。如果超出了以上范围,默认将截至最接近的取值极限。

HSL颜色模式- 6.3.2 -

HSL模式是通过对色调(H)、饱和度(S)、亮度(L)三个颜色通道的设置得到各式各样的颜色。其语法为:

hsl(h,s,l)

参数简要说明如下:

  • H:色调(Hue),值为任意整数值。其中,0(360或-360)表示红色,60表示黄色、120表示绿色,180表示青色,240表示蓝色,300表示洋红。当值大于360时,实际取值等于该值除以360后的余数。

  • S:饱和度(Saturation),表示颜色的深浅和鲜艳程度,值为百分比(0~100%)。其中,0表示没有颜色,100%表示饱和度最高(最鲜艳)。

  • L:亮度(Lightness),值为百分比(0~100%)。其中,0表示最暗(黑色),100%表示最亮(白色)。

因为HSL模式的取值特点,其常表现为HSL色盘(360°的色盘)。

HSLA颜色模式- 6.3.3 -

HSLA是HSL的扩展模式,在HSL的基础上增加了透明通道alpha。其语法为:

hsla(h,s,l,a)

参数简要说明如下:

  • H:色调(Hue),值为任意整数值。其中,0(360或-360)表示红色,60表示黄色、120表示绿色,180表示青色,240表示蓝色,300表示洋红。当值大于360时,实际取值等于该值除以360后的余数。

  • S:饱和度(Saturation),表示颜色的深浅和鲜艳程度,值为百分比(0~100%)。其中,0表示没有颜色,100%表示饱和度最高(最鲜艳)。

  • L:亮度(Lightness),值为百分比(0~100%)。其中,0表示最暗(黑色),100%表示最亮(白色)。

  • A:透明度(Alpha),值为0~1之间的数,值越大,透明度越低。