好程序员web前端分享CSS学习：HSLA颜色模式

一、理论：
1.HSLA颜色模式
a.HSLA在HSL基础上增加了不透明度，值越大透明度越低
b.HSLA颜色模式的浏览器兼容性和HSL一样，只有较新版本的主流浏览器才支持
2.RGBA和HSLA颜色模式二者可以完全相互替换
3.RGBA/HSLA的IE兼容方案
a.在IE8以下版本，一般在前面设置一个非透明色，在其后紧跟一个RGBA/HSLA颜色模式
b.将透明的PNG图片平铺做为背景图片，适用于ie7-8
c.使用Gradient滤镜可以指定半透明颜色，将起止色设置为同一种颜色即可避免产生渐变

二、实践：
1.

<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>Title</title><styletype="text/css">.row{overflow:hidden;}.rowdiv{width:80px;height:80px;line-height:80px;text-align:center;float:left;}.row:nth-of-type(1)div{background:hsla(183,50%,50%,1);}.row:nth-of-type(2)div{background:hsla(133,50%,50%,.8);}.row:nth-of-type(3)div{background:hsla(133,50%,50%,.6);}.row:nth-of-type(4)div{background:hsla(133,50%,50%,.4);}.rowdiv:nth-child(1){background:hsla(133,50%,50%,.2);}.rowdiv:nth-child(2){background:hsla(133,50%,50%,.1);}.rowdiv:nth-child(3){background:hsla(133,50%,50%,.2);}.rowdiv:nth-child(4){background:hsla(133,50%,50%,.3);}.rowdiv:nth-child(5){background:hsla(133,50%,50%,.4);}.rowdiv:nth-child(6){background:hsla(133,50%,50%,.5);}.rowdiv:nth-of-type(1)div{background:hsla(133,50%,50%,.6);}</style></head><body><div><div><div>1</div><div>0.8</div><div>0.6</div><div>0.4</div><div>0.2</div></div><div><div>1</div><div>0.8</div><div>0.6</div><div>0.4</div><div>0.2</div></div><div><div>1</div><div>0.8</div><div>0.6</div><div>0.4</div><div>0.2</div></div><div><div>1</div><div>0.8</div><div>0.6</div><div>0.4</div><div>0.2</div></div><div><div>1</div><div>0.8</div><div>0.6</div><div>0.4</div><div>0.2</div></div></div></body></html>