zoukankan      html  css  js  c++  java
  • CSS学习(十四)-CSS颜色之中的一个

    一、理论:
    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{
                 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>
    


  • 相关阅读:
    [转]Torch是什么?
    去掉 CONSOLE 窗口(转)
    最短路径问题
    最短路,dijstra算法
    最短路,floyd算法,图的最短路径
    freckles
    还是畅通工程,最小生成树kruskal
    More is better
    畅通工程
    人见人爱
  • 原文地址:https://www.cnblogs.com/wzjhoutai/p/7115759.html
Copyright © 2011-2022 走看看