HSLA

　　当然，HSLA 就是HSL 的扩展，就像RGBa一样，添加了第四个透明参数。使用HSLA就像RGBa一样简单，仅仅在那里贴上额外的参数就OK了：div {background: hsla(30, 50%, 80%, 0.5);}HSLA被大部分浏览器支持，包括Safari 3.2+、Chrome、Firefox，IE不支持，和HSL不同的是，Opera9.6并不支持HSLA，直到Opera 10才开始支持HSLA。

　　HSL

　　HSL是一个选择颜色的很直观的方法。如果你需要“再暗一点点儿” 或 “再亮一点点儿”，使用十六进制组合会颇麻烦吧。幸运的是，通过HSL，它就是仅仅一个简单的数字改变。HSL代表Hue(色调、也称“色相”)、Saturation(饱和度)和Lightness(明度)。Hue就是一个色盘中的颜色(参考上图)。色彩选择通过度数来确定，0o 就是红色，120o 是绿色，而240o 就是蓝色。当然，你可以选择中间的不同的色彩组合，这样你就有这些：Saturation(饱和度)是该色彩被使用了多少。0%表示灰度，也就是我们并没有使用这个颜色，而100%表示该颜色很饱满。通俗的讲，饱和度就是颜色的深浅程程度，鲜艳程度Lightness(明度)也就是该色彩有多亮。较低设置意味着暗，较高设置意味着亮，0% 和100%意味着分别为黑和白。所以，一个使用橙色的50%饱和度+50%名都的背景的对象看起来就像这样：

　　div {background: hsl(30, 50%, 80%);}

　　RGBa

　　下面让我们讨论一下RGBa。RGBa是对原始的RGB的扩展，它加入了第四个参数：alpha通道。alpha通道参数采用0 到1之间的小数，就像opacity那样。使用RGBa而不是opacity的优势是，当使用RGBa的时候，透明不会被应用到子元素。这也就一位着，你可以在一个透明对象里面使用一个完全不透明的子对象，而当你使用opacity的时候，透明对象的子元素也是透明的。

　　div {

　　background: rgb(255,0,0); /* The old one */

　　background: rgba(255,0,0,0.5); /* The new one */

　　}

　　Opacity

　　这其实是一个旧属性，令人惊奇的是，它被IE的当前版本支持--尽管是以一种比较复杂的方法。Opacity将整个CSS 对象变透明，所有的子元素的透明度也会适当的继承。官方的语法如下：opacity: [0-1的小数];所以一个opacity: 0.5;设置会让对象50%透明。尽管较新的浏览器积极的支持它，老的浏览器还是需要一些定制的代码，就像IE浏览器一样。