一、理论：

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. drupal-使用hook_preprocess_field在paragraph的accordion中添加自定义数据

    描述:我的accordion类型原先只有两个字段,分别是title和content.显示在页面上会默认隐藏其内容,点击“+”会显示内容.然而现在有一个新需求,就是加一个开关使编辑内容者可以选择默认“展 ...

  2. LinearLayout中间布局填充出现的问题

    线性布局如何中间填充,会挤掉他下面的布局,所以中间填充使用layout_weight属性.

  3. T-SQL语句以及几个数据库引擎

    创建表 注意事项: A.自增长             B.数据库引擎, ISAM 是一个定义明确且历经时间考验的数据表格管理方法,它在设计之时就考虑到数据库被查询的次数要远大于更新的次数.因此,IS ...

  4. C# SetWindowsHookEx

    [DllImport("user32.dll")] static extern IntPtr SetWindowsHookEx(int idHook, keyboardHookPr ...

  5. sqlserver 2014 删除主键约束

    truncate table menu SELECT * FROM sys.foreign_keys WHERE referenced_object_id=OBJECT_ID('menu'); --找 ...

  6. Requirejs常用配置和应用

    requirejs.require方法冲突 如果加载了多个requirejs脚本,每个requirejs会判断是否浏览器已经实现了require和define方法.如果浏览器已经自带require和d ...

  7. Java中的接口详解

    接口 是Java语言中一种引用类型,是方法的集合,如果说类的内部封装了成员变量.构造方法和成员方法,那么接口的内部主要就是封装了方法,包含抽象方法(JDK 7及以前),默认方法和静态方法(JDK 8) ...

  8. C++ 中 字符数组 和 指针 区别

    char str1[] = "abc"; char str2[] = "abc"; const char str3[] = "abc"; c ...

  9. 匈牙利算法求最大匹配（HDU-4185 Oil Skimming）

    如下图:要求最多可以凑成多少对对象 大佬博客: https://blog.csdn.net/cillyb/article/details/55511666 https://blog.csdn.net/ ...

  10. 网络编程：tcp、udp、socket、struct、socketserver

    一.TCP.UDP 一.ARP(Address Resolution Protocol)即地址解析协议,用于实现从 IP 地址到 MAC 地址的映射,即询问目标IP对应的MAC地址. 二.在网络通信中 ...