CSS学习（十六）-HSLA颜色模式

来源：互联网发布：电子书软件免费编辑：程序博客网时间：2024/05/16 07:29

一、理论：
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滤镜可以指定半透明颜色，将起止色设置为同一种颜色即可避免产生渐变

二、实践：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style type="text/css">        .row{            overflow: hidden;        }        .row div{            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);        }        .row div:nth-child(1){            background: hsla(133,50%,50%,.2);        }        .row div:nth-child(2){            background: hsla(133,50%,50%,.1);        }        .row div:nth-child(3){            background: hsla(133,50%,50%,.2);        }        .row div:nth-child(4){            background: hsla(133,50%,50%,.3);        }        .row div:nth-child(5){            background: hsla(133,50%,50%,.4);        }        .row div:nth-child(6){            background: hsla(133,50%,50%,.5);        }        .row div:nth-of-type(1) div {            background: hsla(133,50%,50%,.6);        }    </style></head><body><div class="demo">    <div class="row">        <div>            1        </div>        <div>            0.8        </div>        <div>            0.6        </div>        <div>            0.4        </div>        <div>            0.2        </div>    </div>    <div class="row">        <div>            1        </div>        <div>            0.8        </div>        <div>            0.6        </div>        <div>            0.4        </div>        <div>            0.2        </div>    </div>    <div class="row">        <div>            1        </div>        <div>            0.8        </div>        <div>            0.6        </div>        <div>            0.4        </div>        <div>            0.2        </div>    </div>    <div class="row">        <div>            1        </div>        <div>            0.8        </div>        <div>            0.6        </div>        <div>            0.4        </div>        <div>            0.2        </div>    </div>    <div class="row">        <div>            1        </div>        <div>            0.8        </div>        <div>            0.6        </div>        <div>            0.4        </div>        <div>            0.2        </div>    </div></div></body></html>

0 0