一、理论：

1.HSLA颜色模式

a.HSLA在HSL基础上添加了不透明度，值越大透明度越低

b.HSLA颜色模式的浏览器兼容性和HSL一样，仅仅有较新版本号的主流浏览器才支持

2.RGBA和HSLA颜色模式二者能够全然相互替换

3.RGBA/HSLA的IE兼容方案

a.在IE8下面版本号。一般在前面设置一个非透明色，在其后紧跟一个RGBA/HSLA颜色模式

b.将透明的PNG图片平铺做为背景图片，适用于ie7-8

c.使用Gradient滤镜能够指定半透明颜色。将起止色设置为同一种颜色就可以避免产生渐变

二、实践：

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: hsla(183,50%,50%,1);

        }

        .row:nth-of-type(2) div {

            background: hsla(133,50%,50%,.8);

        }

        .row:nth-of-type(3) div {

            background:  hsla(133,50%,50%,.6);

        }

        .row:nth-of-type(4) div{

            background: hsla(133,50%,50%,.4);

        }

        .row div:nth-child(1){

            background: hsla(133,50%,50%,.2);

        }

        .row div:nth-child(2){

            background: hsla(133,50%,50%,.1);

        }

        .row div:nth-child(3){

            background: hsla(133,50%,50%,.2);

        }

        .row div:nth-child(4){

            background: hsla(133,50%,50%,.3);

        }

        .row div:nth-child(5){

            background: hsla(133,50%,50%,.4);

        }

        .row div:nth-child(6){

            background: hsla(133,50%,50%,.5);

        }

        .row div:nth-of-type(1) div {

            background: hsla(133,50%,50%,.6);

        }

    </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学习（十六）-HSLA颜色模式的更多相关文章

  1. 强化学习(十六) 深度确定性策略梯度(DDPG)

    在强化学习(十五) A3C中,我们讨论了使用多线程的方法来解决Actor-Critic难收敛的问题,今天我们不使用多线程,而是使用和DDQN类似的方法:即经验回放和双网络的方法来改进Actor-Cri ...

  2. 设计模式学习笔记（十六）迭代器模式及其在Java 容器中的应用

    迭代器(Iterator)模式,也叫做游标(Cursor)模式.我们知道,在Java 容器中,为了提高容器遍历的方便性,把遍历逻辑从不同类型的集合类中抽取出来,避免向外部暴露集合容器的内部结构. 一. ...

  3. Scala学习十六——XML处理

    一.本章要点 XML字面量<like>this</like>的类型为NodeSeq 可以在XML字面量中内嵌Scala代码 Node的child属性产出后代节点 Node的at ...

  4. CSS学习笔记六：写原生导航栏

    因为刚开始学习CSS时,只了解了一些基本样式,然后就跑去学习bootstrap.bootstrap是个不错的东西,挺好玩,起码让你写界面写的轻轻松松,几行引入代码,再来个复制粘贴就解决了,而且boot ...

  5. Salesforce LWC学习(十六) Validity 在form中的使用浅谈

    本篇参考: https://developer.salesforce.com/docs/component-library/bundle/lightning-input/documentation h ...

  6. css学习の第六弹—样式设置小技巧

    一.css样式设置小技巧>>1.行内元素水平居中是通过给父元素设置 text-align:center 来实现的.html代码:<body> <div class=&qu ...

  7. Spring学习(十六)----- Spring AOP实例(Pointcut(切点),Advisor)

    在上一个Spring AOP通知的例子,一个类的整个方法被自动拦截.但在大多数情况下,可能只需要一种方式来拦截一个或两个方法,这就是为什么引入'切入点'的原因.它允许你通过它的方法名来拦截方法.另外, ...

  8. 设计模式（十六）迭代器模式 Iterator

    什么时候需要用到迭代器模式? 有许多中方法,可以把对象堆起来放进一个集合(可以是数组.堆栈.列表.哈希表,等等). 每一种类型的集合,都有各自适用的时机.但是某个时间段,客户端可能希望去遍历这个集合. ...

  9. 设计模式（十六）Mediator模式

    在实际的工作小组的交流过程是,组员向仲裁者报告,仲裁者向组员下达指示,组员之间不再互相询问和指示.Mediator模式是指,当发生麻烦事情的时候,通知仲裁者:当发生涉及全体组员的事情时,也通知仲裁者. ...

随机推荐

  1. 文字水平居中和垂直居中的CSS

    首先选择一个需要显示文字的选择器,我这里选择的是微信小程序里面的<view>选择器,在其他语言(如html)的选择器里是一样的做法: <view class="btn-it ...

  2. C#动态验证码

    验证码定义: 就是将一串随机产生的数字或符号,生成一幅图片,图片里加上一些干扰象素(防止OCR),由用户肉眼识别其中的验证码信息,输入表单提交网站验证,验证成功后才能使用某项功能 项目中,我们登录注册 ...

  3. C语言笔记(二)

    注释 编译器会用空格代替代码中原来的注释,并先于预处理指令执行/*…*/ 这种形式的注释不能嵌套只要斜杠(/)和星号(*)之间没有空格,都会被当作注释的开始.例如这样:y = x/*p; \ 是一个接 ...

  4. SQLite-编译指示

    SQLite – 编译指示 SQLite编译指示命令(PRAGMA)是一个特殊的命令是用于控制各种环境变量和状态标志在SQLite的环境.编译指示值可以读取,也可以根据需求设置. 语法: 查询当前的编 ...

  5. AI：AI是什么？

    古老的哲学对科学有永远的借鉴意义,科学上的咬文嚼字往往会让其丧失完备性. 一.AI是什么 你看起来它有多好,它就有多好.本质只能通过表象来描述,在色即是空的逻辑里,图灵测试也许是最精准的AI测试方式. ...

  6. eclipse快捷键：

    打开快捷键提示: ctrl + shift + L; 自动补全代码: Alt + /; 快速修复: ctrl + 1; 导包: ctrl + shift + o; 格式化代码: ctrl + shif ...

  7. 【sqli-labs】 less39 GET -Stacked Query Injection -Intiger based (GET型堆叠查询整型注入)

    http://192.168.136.128/sqli-labs-master/Less-39/?id=1;insert into users(id,username,password) values ...

  8. （转）基于MVC4+EasyUI的Web开发框架经验总结（10）--在Web界面上实现数据的导入和导出

    http://www.cnblogs.com/wuhuacong/p/3873498.html 数据的导入导出,在很多系统里面都比较常见,这个导入导出的操作,在Winform里面比较容易实现,我曾经在 ...

  9. 用Python来实现斐波那契数列.

    1).递归 def fib_recur(n): assert n >= 0, "n > 0" if n <= 1: return n return fib_rec ...

  10. android studio: 为现有项目添加C++支持

    刚开始创建项目的时候并没有勾选“include C++ support” 选项: 后期增加步骤: 1.拷贝已有支持C++项目的CMakeLists.txt文件到现有项目的app目录下: 2.在app/ ...