通常我们使用css控制颜色时，均采用16进制的RGB模式，如 color:#ff0000;
这边先介绍一下几种色彩模式及取值规则
HSL色彩模式是工业界的一种颜色标准，是通过对色调(H)、饱和度(S)、亮度(L)三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色的，HSL即是代表色调，饱和度，亮度三个通道的颜色，这个标准几乎包括了人类视力所能感知的所有颜色，是目前运用最广的颜色系统之一。
HSLA是在HSL的基础上增加一个透明度(A)的设置。
RGB色彩模式（也翻译为“红绿蓝”，比较少用）是工业界的一种颜色标准，是通过对红(R)、绿(G)、蓝(B)三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色的，RGB即是代表红、绿、蓝三个通道的颜色，这个标准几乎包括了人类视力所能感知的所有颜色，是目前运用最广的颜色系统之一。
RGBA在RGB的基础上多了控制alpha透明度的参数
- Hue(色调)。 0(或360)表示红色，120表示绿色，240表示蓝色，当然可取其他数值来确定其它颜色；
- Saturation(饱和度)。 取值为0%到100%之间的值；
- Lightness(亮度)。 取值为0%到100%之间的值；
- alpha(透明度)。 取值在0到1之间；
RGB即(Red,Green,Blue)取值在(0,0,0)到(255,255,255)之间
- <style type="text/css">
- <!--
- .colors { padding:20px; display:block; position:relative; text-align:center; }
- .b-bg { background-color:black; }
- .w-bg { background-color:white; }
- .colors p { font-weight:bold; color:#f00; margin:15px; padding:10px; display:block; clear:both; }
- .colors .color-hsl { background-color:hsl(240,100%,50%); }
- .colors .color-hsla { background-color:hsla(0,100%,50%,0.2); }
- .colors .color-rgba { background-color:rgba(67,180,254,0.5); }
- .colors .color-opacity { background-color:#0d0; opacity:0.6; }
- -->
- </style>
- <div class="colors b-bg">
- <div class="color-hsl"><p>HSL Color Example</p></div>
- <div class="color-hsla"><p>HSLA Color Example</p></div>
- <div class="color-rgba"><p>RGBA Color Example</p></div>
- <div class="color-opacity"><p>Opacity Example</p></div>
- </div>
- <div class="colors w-bg">
- <div class="color-hsl"><p>HSL Color Example</p></div>
- <div class="color-hsla"><p>HSLA Color Example</p></div>
- <div class="color-rgba"><p>RGBA Color Example</p></div>
- <div class="color-opacity"><p>Opacity Example</p></div>
- </div>
效果图
对比黑白背景，即可发现不同透明度的差别。另外一个需要注意的就是 opacity是表示整个层的透明度 :-)
