一、理论：

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颜色之中的一个的更多相关文章

  1. HTML+CSS学习笔记 (7) - CSS样式基本知识

    HTML+CSS学习笔记 (7) - CSS样式基本知识 内联式css样式,直接写在现有的HTML标签中 CSS样式可以写在哪些地方呢?从CSS 样式代码插入的形式来看基本可以分为以下3种:内联式.嵌 ...

  2. mybatis学习笔记(14)-查询缓存之中的一个级缓存

    mybatis学习笔记(14)-查询缓存之中的一个级缓存 标签: mybatis mybatis学习笔记14-查询缓存之中的一个级缓存 查询缓存 一级缓存 一级缓存工作原理 一级缓存測试 一级缓存应用 ...

  3. ZooKeeper学习笔记四：使用ZooKeeper实现一个简单的分布式锁

    作者:Grey 原文地址: ZooKeeper学习笔记四:使用ZooKeeper实现一个简单的分布式锁 前置知识 完成ZooKeeper集群搭建以及熟悉ZooKeeperAPI基本使用 需求 当多个进 ...

  4. 第二十四个知识点：描述一个二进制m组的滑动窗口指数算法

    第二十四个知识点:描述一个二进制m组的滑动窗口指数算法 简单回顾一下我们知道的. 大量的密码学算法的大数是基于指数问题的安全性,例如RSA或者DH算法.因此,现代密码学需要大指数模幂算法的有效实现.我 ...

  5. css学习笔记四

    广州天气变冷了,css学习笔记还是要总结. 总结: 1:几米页面静态页面主要是一列结构头部banner图,mainbody部分放文字内容和图书图片,底部是页面的版权信息 2:腾讯软件中心静态页面制作( ...

  6. Head First Html and CSS学习笔记之CSS

    第七章 CSS入门 元素的许多属性都可以设置样式,太多了,记不住,可以参考<CSS Pocket Reference>. 外部样式表,<link type = "text/ ...

  7. DIV+CSS学习笔记（CSS）

    css基础知识: css样式表的定义 css:(Cascading Style Sheets)层叠样式表: 分类及位置:内部样式-head区域style标签里面 外部样式-link调用 内联样式-标签 ...

  8. HTML+CSS学习笔记 (12) - CSS布局模型

    标签:HTML+CSS css布局模型 清楚了CSS 盒模型的基本概念. 盒模型类型, 我们就可以深入探讨网页布局的基本模型了.布局模型与盒模型一样都是 CSS 最基本. 最核心的概念. 但布局模型是 ...

  9. CSS学习笔记02 CSS选择器

    1.通配符选择器 通配符选择器用“*"号表示,是所有选择器中作用范围最广的,能匹配页面中所有的元素 /*设置当前页面中所有标签的颜色为红色*/ * { color: red; } 2.标签选 ...

  10. 【css学习整理】css基础(样式,语法,选择器)

    CSS是什么? cascading 层叠样式表 sheet 样式文件 style 外观个性化 CSS语法? 声明方法: 选择器(属性: 值; 属性: 值) 选择器: 通过名称制定对哪些标签进行样式设置 ...

随机推荐

  1. 关于debug.keystore文件用法以及错误处理

    在开发过程中需要频繁的为测试的同事签名apk,非常很麻烦,把默认debug.keystore文件替换成发布用(生产环境)的签名文件,不用频繁地签名apk文件了.      如果直接使用生产keysto ...

  2. ZUK Z2 Pro(Z2121) 免解锁BL 免rec Magisk Xposed ROOT 救砖 ZUI 4.0.247

    >>>重点介绍<<< 第一:本刷机包可卡刷可线刷,刷机包比较大的原因是采用同时兼容卡刷和线刷的格式,所以比较大第二:[卡刷方法]卡刷不要解压刷机包,直接传入手机后用 ...

  3. @ResponseBody 返回中文乱码

    第一种解决方法:在@RequestMapping注解添加produces属性 @RequestMapping(value = "testPersonalValidtor.do",p ...

  4. Oracle ASM注意事项

    ASM是负载均衡的存储策略,加新磁盘会将其它盘数据平均迁移到新磁盘,删除磁盘会将删除磁盘数据平均写回其它磁盘 1.同一磁盘组如果是在raid上,划分的磁盘越少越好,磁盘组分布在不同raid上性能好: ...

  5. 几校联考——day1题解

    T1 约数的个数(好像不可提交) 如果一个整数a能够整除整数b,那么a叫做b的约数.现在有N(1 <= N <= 100,000)个整数,对于其中的每一个数,请找出它在其余N - 1个整数 ...

  6. 网络：NAT使用场景

    NAT:Network Address Translation  网络地址转换 使用场景:家庭局域网,公司局域网的网络设备没有公网IP地址如何访问互联网? 简单图示: 理解一些原理: 1,互联网中网络 ...

  7. Linux之日志管理

    日志介绍日志配置日志管理远程日志基于MYSQL的日志 日志介绍日志:历史事件:时间,地点,人物,事件日志级别:事件的关键性程度,Loglevel系统日志服务:sysklogd :CentOS 5之前版 ...

  8. 消除input框的默认样式

    input, button, select, textarea { outline: none; -webkit-appearance: none; border-radius: 0; } outli ...

  9. BZOJ 1016 最小生成树计数 【模板】最小生成树计数

    [题解] 对于不同的最小生成树,每种权值的边使用的数量是一定的,每种权值的边的作用是确定的 我们可以先做一遍Kruskal,求出每种权值的边的使用数量num 再对于每种权值的边,2^num搜索出合法使 ...

  10. 2.2 为什么要使用Shell脚本

        使用脚本编程语言的好处是,它们多半运行在比编译型语言还高的层级,能够轻易处理文件与目录之类的对象.缺点是:它们的效率通常不如编译型语言.不过权衡之下,通常使用脚本编程还是值得的:花一个小时写成 ...