CSS2中色彩模式只有RGB色彩模式(RGB即RED、Green、BLue)和十六进制模式,为了能支持 透明opacity 的Alpha值,CSS3又增加了RGBA色彩模式(RGBA即RED、Green、BLue、Alpha)。

但是不管是RGB模式还是十六进制模式都无法主观感受,所以CSS3又加入HSL颜色模式。当然HSL模式也增加opacity的Alpha值:HSLA模式(HSL模式与HSLA模式的关系跟RGB与RGBA关系一样)。接下来我们介绍 RGBA、HSL以及HSLA这几种新的色彩模式,顺便介绍下Opacity透明属性的区别。

HSL模式

  • RGB色彩模式:可以理解为大自然的颜色都是由红、绿、蓝三种光学颜色混合而成的。所以我们可以用RGB色彩模式来表示某种颜色。颜色最小是0最大值是255,相应位置上是255表示那种颜色最纯,是0没有那种颜色。譬如rgb(255,0,0)纯红,rgb(0,255,0)纯绿,rgb(0,0,255)纯蓝,rgb(255,255,255)就是黑了。
  • 十六进制颜色(简称HEX):则是使用 # 的符号来表示十六进制,形如#RRGGBB的格式,每两位上的值就是RGB上的数字转换16进制后的值。
  • HSL色彩模式:就是色调(Hue)、饱和度(Saturation)、亮度(Lightness)三个颜色通道的改变以及它们相互之间的叠加来获得各种颜色,色调(Hue)色调最大值360,饱和度和亮度有百分比表示0-100%之间。

因为人们看到颜色第一时间会产生“这是什么颜色?深浅如何?明暗如何?”这个疑问不是这是多少红加多少绿多少蓝混合而成的颜色,所以HSL色彩模式是人类对颜色最直接的感知。

颜色集中模式知识就了解这么多了,毕竟我们不是艺术家,还是看代码吧:

div{width: 100px; height: 20px;}
.red{background-color: red}
.red_hex{background-color: #ff0000}
.red_rgb{background-color: rgb(255,0,0);}
.red_hsl{background-color: hsl(0,100%,54%);}
.green_hex{ background-color:#00ff00;}
.blue_hex{ background-color: #0000ff;}

RGB十六进制模式、RGB色彩模式、以及HSL色彩模式DEMO

HSL被现代浏览器较好的支持,而且不需要任何前缀,IE6-IE7不支持。

HSLA模式和RGBA模式与Opacity的区别

其实HSLA模式和RGBA模式就是HSL模式和RGB模式增加一个opacity值,opacity 的Alpha值表示不透明度,取值在0到1之间。

div{width: 100px; height: 20px;}
.red_rgb_alpha{background-color: rgba(255,0,0,0.3);}
.red_hsl_alpha{background-color: hsla(0,100%,54%,0.3);}
.red_hsl_opacity{background-color:red; opacity: 0.3}

HSLA模式和RGBA模式与Opacity的区别DEMO

HSLA模式和RGBA模式与Opacity的区别就是前两者不回影响子类的透明度;而Opacity会影响子类的透明度,从而导致子类元素的颜色产生色差,所以为了避免出现这种情况,我们避免在设置Opacity值的div下包含子类(可以用绝对定位加层级解决这个问题)。

HSLA模式和RGBA模式与Opacity在IE6-IE8都不支持,但是我们可以利用滤镜实现透明,如下:

.red_hsl_opacity{
background-color:red;
opacity: 0.3;/*除了IE,但是IE9支持*/
filter:alpha(opacity=30);/*IE都支持,IE6不支持,可以使用Alpha透明图片作为背景*/
}

Opacity透明DEMO

HSLA颜色的更多相关文章

  1. CSS学习(十六)-HSLA颜色模式

    一.理论: 1.HSLA颜色模式 a.HSLA在HSL基础上添加了不透明度,值越大透明度越低 b.HSLA颜色模式的浏览器兼容性和HSL一样,仅仅有较新版本号的主流浏览器才支持 2.RGBA和HSLA ...

  2. CSS中的HSLA颜色

    CSS 中的颜色可以由RGB色彩空间和HSL色彩空间两种方式来表述.其中我们常用的是RGB色彩空间,RGB色彩空间的颜色表示方式有:十六进制颜色(如红色:#FF0000).RGB颜色(如红色:rgb( ...

  3. css3 HSLA 颜色制造半透明效果

    简介 HSL色彩模式是工业界的一种颜色标准,是通过对色调(H).饱和度(S).亮度(L)三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色的,HSL即是代表色调,饱和度,亮度三个通道的颜色, ...

  4. CSS3颜色特征温故

    网页是色彩的表现原理:显示器是由一个个像素构成,利用电子束来表现色彩.像素把光的三原色:红色(R).绿色(G).蓝色(B)组合成的色彩按照科学原理表现出来.一个像素包含8位元色彩的信息量,又从0 ~ ...

  5. 熟悉css/css3颜色属性

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

  6. CSS1-CSS3 <color>颜色知识知多少?

    非本人原创,原文转载自http://www.zhangxinxu.com/wordpress/2015/07/know-css1-css3-color/ by zhangxinxu from http ...

  7. 在 html 中用加色法混合颜色

    概要 本文通过解决一个假想的问题介绍了 css screen 混合模式,并介绍了如何用 svg 滤镜.canvas 2d.canvas webgl 实现相同的效果. 问题 下面的图片演示三种颜色光叠加 ...

  8. css颜色值设置方式有哪些?以及如何随机一个颜色?

    网页中颜色的使用方式有一下几种 1.颜色名称 ,如red  black white 2.十六进制颜色,网页中常用,每两位代表红绿蓝的值的比例,  如 #ffffff白色   #000000黑色 3.r ...

  9. CSS中的颜色问题

    css颜色: CSS 颜色 颜色是通过对红.绿和蓝光的组合来显示的 颜色值 CSS 颜色使用组合了红绿蓝颜色值 (RGB) 的十六进制 (hex) 表示法进行定义.对光源进行设置的最低值可以是 0(十 ...

随机推荐

  1. oracle 配置监听 windows下 oracle 12c

    1, 在命令行窗口中 输入 hostname 查看主机名 2 查看本机ip地址 ,输入 ipconfig 本地连接 下面的 IPv4 地址 192.168.1.1053,测试连接 输入 ping lo ...

  2. lesson32 Shopping for food

    EMPLOYEE: undefined763cff06-f7fc-4a01-b5f8-c78a2f0110ae.mp3 Can I help you, Sir? 0先生,我能帮你吗? BOB: und ...

  3. c# 判断当前时间是否在 工作日时间段内

    #region //获取当前周几 private string _strWorkingDayAM = "08:30";//工作时间上午08:00 private string _s ...

  4. 微博开放平台开发(一)获取access_token

    因为工作需要,接触到微博开放平台开发.特做此记录方便查用. 一.准备. 1.微博账号.注册很容易. 2.微博账号成为开发者. 登录微博开放平台  登录你注册的账号,然后进入管理中心完善开发者基本信息和 ...

  5. 置信度&置信水平&置信区间

    置信水平是指总体参数值落在样本统计值某一区内的概率:而置信区间是指在某一置信水平下,样本统计值与总体参数值间误差范围.置信区间越大,置信水平越高. 例如:估计某件事件完成会在10~12日之间,但这个估 ...

  6. Oracle中Merge into用法总结

    MERGE语句是Oracle9i新增的语法,用来合并UPDATE和INSERT语句.通过MERGE语句,根据一张表或子查询的连接条件对另外一张表进行查询,连接条件匹配上的进行UPDATE,无法匹配的执 ...

  7. 如何在脚本中获取进程ID(PID)

    我想要知道运行中脚本子shell的进程id.我该如何在shell脚本中得到PID. 当我在执行shell脚本时,它会启动一个叫子shell的进程.作为主shell的子进程,子shell将shell脚本 ...

  8. (转)redis 3.0的集群部署

    一:关于redis cluster 1:redis cluster的现状 reids-cluster计划在redis3.0中推出,可以看作者antirez的声明:http://antirez.com/ ...

  9. thunkify 模块

    function thunkify(fn){ assert('function' == typeof fn, 'function required'); return function(){ var ...

  10. 不一样的Android选择器,简单方便,地址日期时间都好用!

    前言 Android开发有不少情况下会用到Picker,例如选择 地址.日期.时间. 原生Picker和仿iOS的Picker都是上下或左右滑动到固定区域来选择选项: 显示数量少,如果当前选项距离需要 ...