一、理论：

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. golang 获取statuscode

    最近日志打印的时候需要打印状态码,但是因为interface的原因直接获取失败,http.Request里面的response不知道怎么使用,所以就自己重写writeheader,write来截取st ...

  2. net .异步委托知识

    以前在编程中,异步用的比较少,导致C# 一些基础的 东西用法都不怎么熟悉,经常要用的时候在去查找资料比较被动,而已没真正里面理解起来,始终感觉不是自己的知识 (题外话) 首先委托关键字  Delega ...

  3. 5.17 Quartz笔记

    有用到构建者模式: builder---JobDetail相当于需要构建者构建出来的一个配件:JobDetail为Job实例提供了许多设置属性,以及JobDetaMap成员变量属性,它用来存储特定Jo ...

  4. SQLServer2008 关于Group by

    如果我们想知道每个国家有多少种水果,那么我们可以通过如下SQL语句来完成: SELECT COUNT(*) FruitName AS 水果种类, ProductPlace AS 出产国 FROM T_ ...

  5. Android 解析JSON

    上次讲了XML格式数据的解析方式,这次要说的是如何解析JSON数据格式,相对与XML,JSON解析数据的方式在于它的体积更小,在网络上传输可以更省流量. 这次在网上找到一个中国天气json数据的API ...

  6. 触发a标签

    var aLink = document.createElement("a"); aLink.download = ''; aLink.href = url; if (docume ...

  7. inherit 关键字使得元素获取其父元素的计算值

    它可以应用于任何CSS属性,包括CSS简写 all. 对于继承属性,inherit 关键字只是增强了属性的默认行为,只有在重载(overload)其它规则的时候被使用.对于非继承属性,inherit ...

  8. SQL语句注意得问题

    1/不要使用count(列明)或count(常量)来替代count(*),count(*)是SQL92定义得标准统计行数得语法,跟数据库无关,跟NULL和非NULL无关. 说明:count(*)会统计 ...

  9. php第十节课

    数据访问 面向对象:类:由众多对象抽象出来的对象:由类实例化出来的,任何东西都可以看做对象来研究定义类:class 类名{ 成员变量 成员方法} 构造函数:写法特殊 执行特殊,对类里面的成员进行初始化 ...

  10. webstorm中vue项目--运行配制

    ## npm搭建的项目,需要运行npm run dev来启动 webstorm作为一款优秀的编辑器,通过配置运行设置,达到一键运行 1.添加node.js配置 2.configuration-> ...