一、理论：

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. C#中 分层 显示数据库中多表的数据信息

    如下图,要实现将三个表中的内容加载到同一个窗体中,该怎么来实现呢? 要实现上面的查询结果,我们就要从Student表中拿到学生姓名,从Subject表中拿到科目名称,从StudentResult表中拿 ...

  2. Android彻底组件化方案实践

    本文提出的组件化方案demo已经开源,参见文章Android彻底组件化方案开源. 文末有罗辑思维"得到app"的招聘广告,欢迎各路牛人加入!! 一.模块化.组件化与插件化 项目发展 ...

  3. Win32双缓冲讲解

    双缓冲是一种思想,也是一种方法,它可以避免频繁的闪烁问题.如果在画布上直接绘画,由于每次都会重新擦除然后重绘,绘制需要时间,所以肉眼会看到闪烁问题.解决的方法就是在内存中先创建出一个内存dc,然后在内 ...

  4. tomcat报错org.springframework.web.context.ContextLoaderListener找不到

    tomcat报错org.springframework.web.context.ContextLoaderListener找不到. 最后解决办法:将jar包copy到web-inf下面的lib中. 你 ...

  5. hibernate 级联删除报更新失败的问题（org.hibernate.exception.GenericJDBCException: Could not execute JDBC batch update）

    首先hibernate级联删除的前提是,首先需要在映射文件中配置,配置多表之间的关联关系: 下面以部门表(Dept)和员工表(Emp)为例: 1.在Emp.hbm.xml映射文件中配置many-to- ...

  6. struts.xml详解

    参考自:http://blog.csdn.net/zz_mm/article/details/5460397 1.    深入Struts2的配置文件 本部分主要介绍struts.xml的常用配置. ...

  7. ipc （进程间通信

    进程间通信(IPC,Inter-Process Communication),指至少两个进程或线程间传送数据或信号的一些技术或方法.进程是计算机系统分配资源的最小单位(严格说来是线程).每个进程都有自 ...

  8. How an SSL connection is established

    An SSL connection between a client and server is set up by a handshake, the goals of which are: To s ...

  9. Python操作数据库及hashlib模块

    一.hashlib模块 hashlib模块,主要用于加密相关的操作,在python3的版本里,代替了md5和sha模块,主要提供 SHA1, SHA224, SHA256, SHA384, SHA51 ...

  10. day07补充-数据类型总结及拷贝

    目录 数据类型总结 按照存一个值 OR 多个值来分 按照有序 OR 无序来分 按照可变 OR 不可变来分 拷贝 && 浅拷贝 && 深拷贝&& .cop ...