一、理论：

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. android ui篇

    android ui篇主要做两件事情. 第一件事情就是能够自己去定义基本的简单的界面. 第二件事情就是能够使用开源library去构造一些复杂的界面. 第一件事情就需要对于布局等方面知识有着基本的掌握 ...

  2. U - Three displays

    Problem description It is the middle of 2018 and Maria Stepanovna, who lives outside Krasnokamensk ( ...

  3. HDFS 处理命令记录

    hdfs dfs -ls hdfs dfs -mkdir hdfs dfs -put hdfs dfs -get hdfs dfs -cat hadoop 执行jar  输出的目录 必须要不存在的 y ...

  4. Nuxt报错

    新增了个文件store.js: //本地存储的工具库 if(!window.localStorage){ alert('你的浏览器不支持localStorage'); } var store ={ s ...

  5. 6——Z 字形变换（ZigZag Conversion）

    题目描述将一个给定字符串根据给定的行数,以从上往下.从左到右进行 Z 字形排列. 比如输入字符串为 “LEETCODEISHIRING” 行数为 3 时,排列如下: L C I RE T O E S ...

  6. vue中引入json数据，不用本地请求

    1.我的项目结构,需要在Daily.vue中引入daily.js中的json数据 2.把json数据放入一个js文件中,用exports导出,vscode的json格式太严格了,很多数据,调了一个多小 ...

  7. 自编码器----Autoencoder

    一.自编码器:降维[无监督学习] PCA简介:[线性]原矩阵乘以过渡矩阵W得到新的矩阵,原矩阵和新矩阵是同样的东西,只是通过W换基. 自编码: 自动编码器是一种无监督的神经网络模型,它可以学习到输入数 ...

  8. softmax回归---sigmoid（1）

    介绍softmax之前先讲讲sigmoid: 逻辑回归模型常用的函数:sigmoid函数(用来做二分类) 表达式:f(x)=L/(1+exp-k(x-x0)) 其图像: 本质:将一个真值映射到(0,1 ...

  9. 洛谷P1025 数的划分【dp】

    将整数nn分成kk份,且每份不能为空,任意两个方案不相同(不考虑顺序). 例如:n=7n=7,k=3k=3,下面三种分法被认为是相同的. 1,1,51,1,5; 1,5,11,5,1; 5,1,15, ...

  10. [luogu2624 HNOI2008]明明的烦恼 (prufer+高精)

    传送门 Solution 根据prufer序列做的题,具体可以看这里 还知道了一种避免高精除的方法quq Code #include <cmath> #include <cstdio ...