一、理论：

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. 语法错误1：TabError: Inconsistent use of tabs and spaces in indentation

    如图错误: 出错原因: 由于写代码过程用的tab缩进 解决方法: 把tab缩进改用空格缩进

  2. ACM_开心消消乐

    开心消消乐 Time Limit: 2000/1000ms (Java/Others) Problem Description: 大白最近喜欢上了开心消消乐,于是英语基础好的他准备让课文中英语句子也来 ...

  3. jQuery 对象转成 DOM 对象

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...

  4. yaml标记语言的简介

    今天遇到yml这个文件,挺懵的.也是百度了一把. 这篇博文不错:http://www.ibm.com/developerworks/cn/xml/x-1103linrr/ 这图画得不错:http:// ...

  5. Application windows are expected to have a root view controller at the end of application launch

    今天把Xcode升级了,模拟器 用的12.1的系统,运行时发现项目总是崩溃,采用9.3系统的测试机发现错误日志如下: Application windows are expected to have ...

  6. Combotree--别样的构建层级json字符串

    1.先看效果 2.需要使用层级json格式,如: 3.先不要着急怎么去实现它,先来想想怎么用对象来描述它 4.代码 protected void Page_Load(object sender, Ev ...

  7. VC常用代码之创建进程

    作者:朱金灿 来源:http://blog.csdn.net/clever101 创建进程是编程开发的常用操作.Windows中的创建进程采用API函数CreateProcess实现.下面是一个使用例 ...

  8. 安卓学习之学生签到APP（一）

    一.学生定位签到页面 具体实现步骤: 1.1 高德地图申请key 1.创建新应用 进入高德地图api控制台,创建一个新应用.如果您之前已经创建过应用,可直接跳过这个步骤. 2.添加新Key 在创建的应 ...

  9. 【Oracle】Rman备份策略

    1. 查看可设置参数 RMAN> show all; RMAN configuration parameters for database with db_unique_name DRZ are ...

  10. I2C controller core之Bit controller(03)

    FPGA proven, AISC proven, I2C controller core from OpenCores http://opencores.org/project,i2c Bit-co ...