CSS学习（十四）-CSS颜色之中的一个
Posted wzjhoutai
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSS学习（十四）-CSS颜色之中的一个相关的知识，希望对你有一定的参考价值。
一、理论：
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>
以上是关于CSS学习（十四）-CSS颜色之中的一个的主要内容，如果未能解决你的问题，请参考以下文章