CSS学习（十四）-CSS颜色之一

来源：互联网发布：fedora 安装软件编辑：程序博客网时间：2024/05/19 09:17

一、理论：
1.RGB色彩模式
a.CMYK色彩模式
b.索引色彩模式 (主要用于web)
c.灰度模式
d.双色调模式
2.opacity:
a.alphavalue:透明度
b.inherit:继承父元素的不透明性
二、实践：

<!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: #202189;            color:#fff;        }        .row:nth-of-type(2) div {            background: #31b231;        }        .row:nth-of-type(3) div {            background: #239587;        }        .row:nth-of-type(4) div{            background: #333333;        }        .row div:nth-child(1){            background: #004099;            color:#8f8f8f;        }        .row div:nth-child(2){            opacity: 1;        }        .row div:nth-child(3){            opacity: 0.8;        }        .row div:nth-child(4){            opacity: 0.6;        }        .row div:nth-child(5){            opacity: 0.4;        }        .row div:nth-child(6){            opacity: 0.2;        }        .row div:nth-of-type(1) div {            opacity: 1;        }    </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