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. Mysql索引分类和索引优化

    一. MySQL: 索引以B树格式保存 Memory存储引擎可以选择Hash或BTree索引,Hash索引只能用于=或<=>的等式比较. 1.普通索引:create index on Ta ...

  2. 亚马逊aws 一个实例双网卡-两个弹性ip设置

    一个实例默认只有1个网络接口: 步骤一.创建一个新的网络接口,附加到实例. 步骤二.手动添加路由 增加两个路由表,为后续的双网关做点小准备: vim /etc/iproute2/rt_tables 添 ...

  3. webdriver 启动chrome时加载配置

    Selenium操作浏览器是不加载任何配置的,网上找了半天,关于Firefox加载配置的多点,Chrome资料很少,下面是关于加载Chrome配置的方法:  一.加载所有Chrome配置 用Chrom ...

  4. 固态硬盘SSD,机械硬盘HDD,4K速度对比。

    HDD - SSD -

  5. 1124 Raffle for Weibo Followers (20 分)

    1124 Raffle for Weibo Followers (20 分) John got a full mark on PAT. He was so happy that he decided ...

  6. python之路——2

    王二学习python的笔记以及记录,如有雷同,那也没事,欢迎交流,wx:wyb199594 复习 1.编译型:一次性将全部的代码编译成二进制文件 c c++ 优点:运行效率高 缺点:开发速度慢,不能跨 ...

  7. Jmeter(四十一)分布式测试(转!)

    寄语路人休掩鼻,活人不及死人香. -------<随园诗话>袁枚 转自:https://www.cnblogs.com/imyalost/p/8306866.html 1.修改Contor ...

  8. .net core批量注入实现类

    1.获取实现类程序集方法 public class RuntimeHelper { //通过程序集的名称加载程序集 public static Assembly GetAssemblyByName(s ...

  9. js浮点数运算封装, 起因财务部分精确计算

    目录 背景 具体代码 背景 项目中用到浮点数,Int 等 js中 Number类型比较多, 加上牵涉到财务软件, 前台js运算等. 有时候会出现精确度的问题 , 公共方法中有好事者写的方法. 此处拿来 ...

  10. ajax的跨域解决方案(java+ajax)

    简单的建立一个后台项目 新建servlet: 内容如下: package a; import java.io.IOException; import java.io.PrintWriter; impo ...