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>
    


  • 相关阅读:
    PHP代码审计-command injection-dvwa靶场
    PHP代码审计-Brute Force-dvwa靶场
    PHP代码审计-XSS
    Linux下安装SQLServer2019
    Linux--每日一个跑路小命令之 chmod 000 -R /
    linux的小命令-fuck
    uni-app 页面样式与布局
    uni-app内置基础组件
    uni-app pages.json常用配置
    uni-app项目目录和文件作用
  • 原文地址:https://www.cnblogs.com/wzjhoutai/p/7115759.html
Copyright © 2011-2022 走看看