一、理论：

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. EditPlus 2：用空格替换制表符

    打开软件点击菜单栏上的Tools(工具),在点击perferences(外观),再点击左边栏的File->Setting & Syntax(文件->设置与符号),再点击右栏的Tab ...

  2. Spring的AOP机制---- 切入点表达式---- 切入点表达式

    3333钱钱钱钱钱钱钱钱钱钱钱钱钱钱钱

  3. bcg库使用心得两则

    作者:朱金灿 来源:http://blog.csdn.net/clever101 最近帮同事解决了两个BCG库的使用问题,特记录下来. 一是在outlook风格停靠栏上创建对话框的做法.代码如下: C ...

  4. 数据库 'tempdb' 的事务日志已满。若要查明无法重用日志中的空间的原因

    最常的做法: --1.清空日志 DUMP TRANSACTION tempdb WITH NO_LOG --2.截断事务日志: BACKUP LOG tempdb WITH NO_LOG --3.收缩 ...

  5. java Web(2)

    Servlet与web容器的配合: 1)客户端向Web服务器发起一个HTTP请求. 2)HTTP请求被Web服务器接受,如果请求的是静态页面,则由Web服务器负责处理.如果请求的是Java Web组件 ...

  6. Spring MVC 中的基于注解的 Controller（转载）

           终于来到了基于注解的 Spring MVC 了.之前我们所讲到的 handler,需要根据 url 并通过 HandlerMapping 来映射出相应的 handler 并调用相应的方法 ...

  7. HTML DIV中文字自动换行 , 顶部对齐

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta ht ...

  8. HTML input 控件

    <input type="file" id="file1" onChange="test()"> function test() ...

  9. 团体程序设计天梯赛-练习集-L1-039. 古风排版

    L1-039. 古风排版 中国的古人写文字,是从右向左竖向排版的.本题就请你编写程序,把一段文字按古风排版. 输入格式: 输入在第一行给出一个正整数N(<100),是每一列的字符数.第二行给出一 ...

  10. 配平化学方程式的C++代码实现

    配平化学方程式的C++代码实现 纪念一下我今天写过了 20171006. (去年的这个时候我就有了这个大胆的想法, 当时的思路是:字符串处理->暴力搜系数,可是太年轻写不对,我那会还是个只会模拟 ...