前面我们讲一了篇关于《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。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Language" content="utf-8" /> <meta name="robots" content="all" /> <meta name="author" content="Tencent-ISRD" /> <meta name="Copyright" content="Tencent" /> <title>HSLA colors</title> </head> <body> <div style="background-color: hsla(0,100%,50%,0.2);">在Firefox的浏览器里能看到透明色背景</div> </body> </html>