好得很程序员自学网

<tfoot draggable='sEl'></tfoot>

CSS学习(十五)-CSS颜色模式、CSS颜色透明度_html/css_WEB-ITnose

一、理论:
1.CSS3颜色模式
a.RGBA颜色模式,在RGB基础上加了控制alpha透明度的参数
b.HSL颜色模式:色调 饱和度 亮度
c.HSLA颜色模式:A值取于0-1之间,值越大,透明度越低
2.RGBA/HSLA滤镜格式
a.需要用转换工具才能在ie8及以下版本中使用RGBA/HSLA颜色模式相同的透明度,需要将RGBA/HSLA中的透明值乘以255,然后将其转换成十六进制值

二、实践:

1.

             Title              .row{            overflow: hidden;        }        .row div{            width: 80px;            height: 80px;            line-height: 80px;            text-align: center;            float:left;        }        .row:nth-of-type(1) div {            background: rgba(135,162,31,0.8);        }        .row:nth-of-type(2) div {            background: rgba(135,162,31,0.6);        }        .row:nth-of-type(3) div {            background: rgba(135,162,31,0.4);        }        .row:nth-of-type(4) div{            background: rgba(135,162,31,0.2);        }        .row div:nth-child(1){            background: rgba(135,162,31,0.8);        }        .row div:nth-child(2){            background: rgba(135,162,31,0.7);        }        .row div:nth-child(3){            background: rgba(135,162,31,0.6);        }        .row div:nth-child(4){            background: rgba(135,162,31,0.5);        }        .row div:nth-child(5){            background: rgba(135,162,31,0.4);        }        .row div:nth-child(6){            background: rgba(135,162,31,0.3);        }        .row div:nth-of-type(1) div {            background: rgba(135,162,31,0.2);        }       

1

查看更多关于CSS学习(十五)-CSS颜色模式、CSS颜色透明度_html/css_WEB-ITnose的详细内容...

  阅读:47次