CSS3文档中提到:(HSLA)

H是色度,取值在0度~360度之间,0度是红色,120度是绿色,240度是蓝色。360度也是红色。

S是饱和度,是色彩的纯度,是一个百分比的值,取值在0%~100%,0%饱和度最低,100%饱和度最高

L是亮度,也是一个百分比值,取值在0%~100%,0%最暗,100%最亮。

A是不透明度,取值在0.0~1.0,0.0完全透明,1.0完全不透明。

这样一说大家肯定是很迷的一个概念

举点例子吧:(只要区分中间的百分比值)

这是标准的绿色值:

background-color:hsla(120,50%,50%,1);

--------------------------------------------------------

这样就会变成白色:

background-color:hsla(120,50%,100%,1);

--------------------------------------------------------

这样就会变成黑色:

background-color:hsla(120,50%,0%,1);

--------------------------------------------------------

这样就会变成明亮的绿色:

background-color:hsla(120,100%,50%,1);

--------------------------------------------------------

我们发现第三个值>50%就加白色(原本的基础上多了白色),<50%就加黑色(原本的基础上多了黑色):

background-color:hsla(120,100%,20%,1);

--------------------------------------------------------

这样就会变成明亮的灰色:

background-color:hsla(120,0%,50%,1);

-----------------------------------------------------------------

我们发现第二个值>50%就加亮(原本的基础上绿色更明显),<50%就加暗(原本的基础上绿色更少更淡):

background-color:hsla(120,20%,50%,1);

--------------------------------------------------------

快速了解CSS3当中的HSLA 颜色值怎么算的更多相关文章

  1. CSS3:HSL和HSLA

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  2. CSS3—HSL与HSLA属性

    ㈠HSL(H,S,L) ⑴通过对色相(H).饱和度(S).明度(L)三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色 ⑵取值 H:Hue(色调).0(或360)表示红色,120表示绿色,2 ...

  3. CSS3总结 (帅哥)

    第1章CSS3简介 如同人类的的进化一样,CSS3是CSS2的"进化"版本,在CSS2基础上,增强或新增了许多特性, 弥补了CSS2的众多不足之处,使得Web开发变得更为高效和便捷 ...

  4. HTML5和CSS3基础教程(第8版)-读书笔记(2)

    第7章 CSS构造模块 7.1 构造样式规则 样式表中包含了定义网页外观的规则.样式表中的每条规则都有两个主要部分:选 择 器(selector) 和 声 明 块(declaration block) ...

  5. CSS3基础入门01

    CSS3 基础入门 01 前言 相对于css2来说,css3更新了很多的内容,其中包括选择器.颜色.阴影.背景.文本.边框.新的布局方案.2d.3d.动画等等. 而如果想要学习css3的诸多部分,不妨 ...

  6. 前端CSS3笔记

    第1章CSS3简介 如同人类的的进化一样,CSS3是CSS2的“进化”版本,在CSS2基础上,增强或新增了许多特性, 弥补了CSS2的众多不足之处,使得Web开发变得更为高效和便捷. 1.1   CS ...

  7. Css3新特性总结之边框与背景(一)

    本系列主要总结Css3一些新特性的认识,来源于<css揭秘>书. 一.半透明边框 css3最好用hsla,而不是rgba,hsla是:h:颜色值(0~360):s:饱合度(0%~100%) ...

  8. css3新特性

    1.css3选择器   我们所定义的 CSS 属性之所以能应用到相应的节点上,就是因为 CSS 选择器模式.参考下述代码: Body > .mainTabContainer div > s ...

  9. 熟悉css/css3颜色属性

    颜色属性无处不在.字体要用颜色,背景可以有颜色,粒子特效更是离不开颜色.本文参考了一些资料简单总结下以备日后查阅. css中颜色的定义方式: 十六进制色 RGB & RGBA HSL & ...

随机推荐

  1. golang里处理xml文件 转自https://studygolang.com/articles/5328

    <?xml version="1.0" encoding="utf-8"?> <servers version="1"&g ...

  2. Excel技巧--空白处补零

    当我们有一表格,而表格的空白单元格要补零时,如下图: 那么手动添加零比较麻烦,特别是行数很多时.可以用如下方法: 1.使用“替换”功能: 查找内容为空,替换处填写0,然后点击全部替换即可. 2.使用定 ...

  3. [视频播放] HLS协议之M3U8、TS流详解

    本文转载自:<hls之m3u8.ts流格式详解> HLS,Http Live Streaming 是由Apple公司定义的用于实时流传输的协议,HLS基于HTTP协议实现,传输内容包括两部 ...

  4. linux找不到动态链接库 .so文件的解决方法

    linux找不到动态链接库 .so文件的解决方法 如果使用自己手动生成的动态链接库.so文件,但是这个.so文件,没有加入库文件搜索路劲中,程序运行时可能会出现找不到动态链接库的情形. 可以通过ldd ...

  5. PAT 乙级 1049 数列的片段和(20) C++版

    1049. 数列的片段和(20) 时间限制 200 ms 内存限制 65536 kB 代码长度限制 8000 B 判题程序 Standard 作者 CAO, Peng 给定一个正数数列,我们可以从中截 ...

  6. jmap、jstack、jps无法连接jvm解决办法

    转载 http://blog.51cto.com/zhangshaoxiong/1310166 一.背景 在对线上服务器的java应用dump操作时发现,以下报错,不能dump.jps也获取不到jav ...

  7. python打包--pyinstaller打包报错

    先来一段报错信息  目前打包主要涉及socket模块出现的报错 missing module named resource - imported by posix, C:\Users\Administ ...

  8. OpenStack存储(单节点)

    一.OpenStack Swift对象存储 1.安装Swift服务 在controller节点依次执行iaas-install-swift-controller.sh和iaas-install-swi ...

  9. 在 Element-UI 的 Table 组件上添加列拖拽效果

    Element-UI 的 Table组件很强大,但是我们的需求更强大... 简单粗暴的来一发效果图: 一.数据驱动 传统的拖动效果,都是基于通过 mousedown.mousemove.mouseup ...

  10. java中,什么是方法的重载?需要满足什么条件?两同三不同指的什么?

    方法重载需要满足以下几个条件: 在同一个类中 方法的名称相同 参数列表不同 方法重载有以下特点: 与访问修饰符和返回值类型无关 与异常无关 方法重载的作用: 传递不同的参数实现相同的效果 所谓两同,就 ...