日期:2013-05-04  浏览次数:21077 次

前面我们讲一了篇关于《CSS3 HSL colors 使用说明》的文章,这里我们再说说css中别一个颜色相关的属性:CSS3 HSLA colors

其语法为: <length> <percentage> <percentage> <opacity>各个属性跟我们前说的HSL相反,有别之处是加了一个:opacity,其意思为: alpha(通明度)。 取值在0到1之间;HSLA是在HSL的基础上添加一个通明度(A)的设置。

当然,HSLA 就是HSL 的扩展,就像RGBa一样,添加了第四个通明参数。使用HSLA就像RGBa一样简单,仅仅在那里贴上额外的参数就OK了:

如:div {background: hsla(30, 50%, 80%, 0.5);};

这个例子也是使用了橙色,但是添加了50%通明。 HSLA被大部分浏览器支持,包括Safari 3.2+、Chrome、Firefox,IE不支持,和HSL不同的是,Opera9.6并不支持HSLA,直到Opera 10才开始支持HSLA。