CSS学习（十五）-CSS颜色模式、CSS颜色透明度

一、理论：

1.CSS3颜色模式

a.RGBA颜色模式，在RGB基础上加了控制alpha透明度的参数

b.HSL颜色模式：色调饱和度亮度

c.HSLA颜色模式：A值取于0-1之间，值越大，透明度越低

2.RGBA/HSLA滤镜格式

a.需要用转换工具才能在ie8及以下版本中使用RGBA/HSLA颜色模式相同的透明度，需要将RGBA/HSLA中的透明值乘以255，然后将其转换成十六进制值

二、实践：

<!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: rgba(135,162,31,0.8);
        }
        .row:nth-of-type(2) div {
            background: rgba(135,162,31,0.6);
        }
        .row:nth-of-type(3) div {
            background: rgba(135,162,31,0.4);
        }
        .row:nth-of-type(4) div{
            background: rgba(135,162,31,0.2);
        }
        .row div:nth-child(1){
            background: rgba(135,162,31,0.8);
        }
        .row div:nth-child(2){
            background: rgba(135,162,31,0.7);
        }
        .row div:nth-child(3){
            background: rgba(135,162,31,0.6);
        }
        .row div:nth-child(4){
            background: rgba(135,162,31,0.5);
        }
        .row div:nth-child(5){
            background: rgba(135,162,31,0.4);
        }
        .row div:nth-child(6){
            background: rgba(135,162,31,0.3);
        }
        .row div:nth-of-type(1) div {
            background: rgba(135,162,31,0.2);
        }
    </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>

<!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: hsl(133,100%,80%);
        }
        .row:nth-of-type(2) div {
            background: hsl(133,80%,80%);
        }
        .row:nth-of-type(3) div {
            background:  hsl(133,60%,80%);
        }
        .row:nth-of-type(4) div{
            background: hsl(133,50%,80%);
        }
        .row div:nth-child(1){
            background: hsl(33,100%,70%);
        }
        .row div:nth-child(2){
            background: hsl(33,90%,70%);
        }
        .row div:nth-child(3){
            background: hsl(33,80%,70%);
        }
        .row div:nth-child(4){
            background: hsl(33,70%,70%);
        }
        .row div:nth-child(5){
            background: hsl(33,60%,70%);
        }
        .row div:nth-child(6){
            background: hsl(33,50%,70%);
        }
        .row div:nth-of-type(1) div {
            background: hsl(33,100%,70%);
        }
    </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>

时间： 2024-12-06 02:38:46

CSS学习（十五）-CSS颜色模式、CSS颜色透明度的相关文章

[WebGL入门]十五，为多边形涂抹颜色（顶点颜色的指定）

注:文章译自http://wgld.org/,原作者杉本雅広(doxas),文章中如果有我的额外说明,我会加上［lufy:］,另外,鄙人webgl研究还不够深入,一些专业词语,如果翻译有误,欢迎大家指正. 本次的demo的运行结果增加顶点属性的个数上次,终于绘制了一个三角形,但是只绘制了一个纯白色的多边形.这次,给多边形的顶点中添加颜色属性,基本上做的事情和上一篇文章一样,只是稍微增加点步骤而已.首先,就像以前多次重复的那样,顶点可以包含很多种情报(参考:顶点缓存和基础),而且每一个情报叫做

Oracle学习(十五)：分布式数据库

--分布式数据库的独立性:分布数据的独立性指用户不必关心数据如何分割和存储,只需关心他需要什么数据. --本地操作 SQL> sqlplus scott/tiger --远程操作 SQL> sqlplus scott/[email protected]:1521/orcl --分布式操作 SQL> --创建数据库链路l2(需要权限): SQL> --remoteorcl服务命名(在net manager里配置):配置跟远程服务器的数据库的连接协议.主机名(ip地址).端口号等 SQ

设计模式 ( 十五 ) 中介者模式Mediator（对象行为型）

设计模式 ( 十五 ) 中介者模式Mediator(对象行为型) 1.概述在面向对象的软件设计与开发过程中,根据“单一职责原则”,我们应该尽量将对象细化,使其只负责或呈现单一的职责,即将行为分布到各个对象中. 对于一个模块或者系统,可能由很多对象构成,而且这些对象之间可能存在相互的引用,在最坏的情况下,每一个对象都知道其他所有的对象,这无疑复杂化了对象之间的联系.虽然将一个系统分割成许多对象通常可以增强可复用性,但是对象间相互连接的激增又会降低其可复用性,大量的相互连接使得一个对象似乎不太可能

CSS基础学习十五：盒子模型补充之外边距合并

今天继续接着CSS盒子模型补充,CSS基础学习十三:盒子模型和CSS基础学习十四:盒子模型补充之display属性设置都是介绍了盒子模型中的内容概括.开始今天的主题:外边距合并. 外边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距.合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者. (1)外边距合并外边距合并叠加是一个相当简单的概念.但是,在实践中对网页进行布局时,它会造成许多混淆.简单地说,外边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距.合并后的

CSS学习（五）

导航栏熟练使用导航栏,对于任何网站都非常重要. 使用CSS你可以转换成好看的导航栏而不是枯燥的HTML菜单. 导航栏=链接列表作为标准的HTML基础一个导航栏是必须的.在我们的例子中我们将建立一个标准的HTML列表导航栏. 导航条基本上是一个链接列表,所以使用 <ul> 和 <li>元素非常有意义: <ul> <li><a href="default.asp">Home</a></li> <l

css学习の第五弹—单位和值

一. >>1.颜色表示方法总结: 1.英文命令颜色前面几个小节中经常用到的就是这种设置方法: p{color:red;} 2.RGB颜色这个与 photoshop 中的 RGB 颜色是一致的,由 R(red).G(green).B(blue) 三种颜色的比例来配色. p{color:rgb(133,45,200);} 每一项的值可以是 0~255 之间的整数,也可以是 0%~100% 的百分数.如: p{color:rgb(20%,33%,25%);} 3.十六进制颜色这种颜色设置方法是

设计模式学习（十五）策略模式

策略模式对应于解决某一个问题的一个算法族,允许用户从该算法族中任选一个算法解决某一问题,同时可以方便的更换算法或者增加新的算法,并且由客户端决定调用那个算法本质: -- 分离算法,选择实现开发中常见的场景: 代码实现: package strategy; public interface Strategy { public double getPrice(double standardPrice); } 策略接口 package strategy; public class NewCusto

设计模式学习笔记（十五：组合模式）

1.1概述将对象组合成树形结构以表示"部分-整体"的层次结构.组合(Composite)使用户对单个对象和组合对象的使用具有一致性.这就是组合模式的定义. 如果一个对象包含另一个对象的引用,称这样的对象为组合对象.如果将当前组合对象作为一个整体的话,那么它所包含的对象就是该整体的一部分.如果一个对象不含有其他对象的引用,称这样的对象为个体对象.在编写程序时,我们希望将许多个体对象和组合对象组成树形结构,以此表示"部分-整体"的层次结构,并借助该层次结构使得用户能用

javascript设计模式学习之十五——中介者模式

一.中介者模式的定义和应用场景中介者模式的作用在于解除对象之间的紧耦合关系,增加一个中介者之后,所有对象都通过中介者来通信,而不是互相引用,当一个对象发生变化的时候,仅需要通知中介者即可.从而将网状的多对多关系转换为了简单的一对多关系. 二.

JS学习十五天----设计模式开篇

JS设计模式开篇前言作为小小程序员一枚,除了敲个hello,world以后啥都不会了,最近发现设计模式这个东西挺好,想搞一下,声明,本屌不是一个看见什么好,什么新潮就追什么的人,本屌还是一个比较实际的人,一般不会说什么好要什么,学设计模式完全是个人的爱好,看一看做是无聊打发时间的消遣吧. 什么是设计模式呢?既然是个模式,就说明可以套用这个模式,套用你知道是什么意思吧?一本万利明白吧?差不多就是这个意思,等你熟练掌握了所有的设计模式之后,你就可上九天揽月,可下五洋捉鳖.手握日月摘星辰,世间无我