一、理论：

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. 使用A*寻路小记

    前几天做另一个DEMO 要用实现自动寻路功能,看到普遍都是A* 学习了下 我的主循环代码: isFindEndPoint = false; //主循环 do { CreateOutSkirtsNode ...

  2. Git系列学习(1)-Git安装

    一.概述 msysGit名字前面的四个字面来源于MSYS项目: MSYS项目来源于MinGW(Minimalist GNU for Windows,最简GNU工具集) 通过添加一个bash提供的she ...

  3. Boost Bimap示例

    #include <string> #include <iostream> #include <boost/bimap.hpp> template< clas ...

  4. javascript特殊值常量

    Infinity 表示无穷大的特殊值.当数字运算结果超出javascript能表示的数字范围时. Nan 特殊的非数字值(not a number).0除0.数字运算符的操作数为字符等情况. Numb ...

  5. Leetcode0457--Circular Array Loop

    [转载请注明]https://www.cnblogs.com/igoslly/p/9339478.html class Solution { public: bool circularArrayLoo ...

  6. Angular——数据绑定

    基本介绍 angularjs可以实现数据的双向绑定:(1)视图到模型的数据绑定,(2)模型到数据的绑定 基本使用 1.ng-model可以实现视图到模型的数据传输 2.{{name}}可以实现模型到视 ...

  7. [Windows Server 2008] Apache+PHP安全设置

    ★ 欢迎来到[护卫神·V课堂],网站地址:http://v.huweishen.com★ 护卫神·V课堂 是护卫神旗下专业提供服务器教学视频的网站,每周更新视频.★ 本节我们将带领大家:Win2008 ...

  8. tac

    功能说明:反向显示文件内容. 参数选项: -b 在行前而非行尾加分隔标志. -r 将分隔标志视作正则表达式来解析. -s 使用指定字符串代替换行作为分隔标志.   cat命令与tac命令的对比:

  9. iOS crash log 解析 symbol address = stack address - slide 运行时获取slide的api 利用dwarfdump从dsym文件中得到symbol

    概述: 为什么 crash log 内 Exception Backtrace 部分的地址(stack address)不能从 dsym 文件中查出对应的代码? 因为 ASLR(Address spa ...

  10. Python学习【第7篇】：Python之常用模块2

    hashlib,configparser,logging模块 一.常用模块二 hashlib模块 hashlib提供了常见的摘要算法,如md5和sha1等等. 那么什么是摘要算法呢?摘要算法又称为哈希 ...