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