一、理论：

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. 转 使用Hibernate操作数据库时报：No CurrentSessionContext configured! 异常

    没有currentSession配置错误,即在我们使用currentSession的时候要在hibernate.cfg.xml中进行相关的事务配置:1.本地事务<property name=&q ...

  2. Android studio & SDK的国内有效站点。

    SDK.TOOLS的国内有效镜像节点: mirrors.zzu.edu.cn/android/repository/ 网上的地址只写了mirrors.zzu.edu.cn,有误,需要补齐后面的子目录才 ...

  3. 64位windows系统如何显示32位dcom组件配置

    在运行栏中输入命令:dcomcnfg,打开组件服务管理窗口,但是却发现找不到Microsoft Excel程序,这主要是64位系统的问题,excel是32位的组件,所以在正常的系统组件服务里是看不到的 ...

  4. 4星|《超级技术：改变未来社会和商业的技术趋势》：AI对人友好吗

    超级技术:改变未来社会和商业的技术趋势 多位专家或经济学人编辑关于未来的预测,梅琳达·盖茨写了其中一章.在同类书中属于水平比较高的,专家只写自己熟悉的领域,分析与预测有理有据而不仅仅是畅想性质. 以下 ...

  5. 【技术累积】【点】【java】【29】MapUtils

    内容 是Apache组织下的commons-collections包中的工具类 <dependency> <groupId>commons-collections</gr ...

  6. CSS之float浮动

    CSS理解之float浮动 首先我们看看W3C给出的关于 float 的说明: 参考资料   MDN   W3C

  7. switch方法中使用数字区间

    function getCategory(age) { var category = ""; switch (true) { case isNaN(age): category = ...

  8. drf07 过滤 排序 分页 异常处理 自动生成接口文档

    4. 过滤Filtering 对于列表数据可能需要根据字段进行过滤,我们可以通过添加django-fitlter扩展来增强支持. pip install django-filter 在配置文件sett ...

  9. recreate dbcontrol on database 11.2.0.1 using emca

    [oracle@osb ~]$ env | grep ORA ORACLE_SID=ACE ORACLE_BASE=/oracle ORACLE_TERM=xterm ORACLE_HOME=/ora ...

  10. 7-9 旅游规划 （25 分）（Dijkstra算法）

    题意: ​ 思路:单源最短路问题,Dijkstra算法搞定就可以了,因为要找出最便宜的最短路,所以需要在更新最短距离的时候加一个条件(即当最短距离相等的时候,如果该路径的花费更小,就更新最小花费)就可 ...