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

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

色彩模式

  • 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

CSS3新增Hsl、Hsla、Rgba色彩模式以及透明属性(转)的更多相关文章

  1. CSS3 新增选择器:伪类选择器和属性选择器

    一.结构(位置)伪类选择器( : ) 1.:first-child 2.:last-child 3.:nth-child(n)或者:nth-child(2n)或者:nth-child(2n+1) &l ...

  2. css3新增功能

    CSS3新增功能 1 CSS3选择器详解 1.1 基础选择器 通配选择器* 元素选择器E ID选择器#id CLASS选择器.class 群组选择器select1,selectN 1.2 层次选择器 ...

  3. CSS3新增

    1 CSS3 的选择器 1.1 基本选择器 tagName .className #idName * slector,selector,selector 1.2 层级选择器 selector1 sel ...

  4. CSS3 新增颜色表示方式

    一.CSS1&2颜色表示方式(W3C标准) 1.Color name  颜色名称方式(用颜色关键字表示对应的颜色.) 例如:red(红色).blue(蓝色).pink(粉色) 优点:方便快捷而 ...

  5. css3新增属性API

    写在前面:由于CSS5标准还未完全订下来,所以各种内核的浏览器都有自己的标准,为了不使属性混淆,所以各家在各自标准前加了一个前缀. -moz-  主要是firefox火狐 -webikt-主要是chr ...

  6. 高效开发之SASS篇 灵异留白事件——图片下方无故留白 你会用::before、::after吗 link 与 @import之对比 学习前端前必知的——HTTP协议详解 深入了解——CSS3新增属性 菜鸟进阶——grunt $(#form :input)与$(#form input)的区别

    高效开发之SASS篇   作为通往前端大神之路的普通的一只学鸟,最近接触了一样稍微高逼格一点的神器,特与大家分享~ 他是谁? 作为前端开发人员,你肯定对css很熟悉,但是你知道css可以自定义吗?大家 ...

  7. CSS3新增的选择器和属性

    <!doctype html>无标题文档 一.新增的选择器 CSS3新增的属性选择器 {除ie6外的大部分浏览器支持) 序号 选择器 含义 实例 1 E[att^="val&qu ...

  8. H5和CSS3新增内容总结

    CSS3选择器有哪些?答:属性选择器.伪类选择器.伪元素选择器.CSS3新特性有哪些?答:1.颜色:新增RGBA,HSLA模式 文字阴影(text-shadow.) 边框: 圆角(border-rad ...

  9. HTML5+CSS3新增内容总结!!!!!绝对干货

    说到H5C3会不会觉得东西好多啊,今天就整理了一份总结性的内容: CSS3选择器有哪些?答:属性选择器.伪类选择器.伪元素选择器.CSS3新特性有哪些?答:1.颜色:新增RGBA,HSLA模式 文字阴 ...

随机推荐

  1. iOS图案锁,支持动画、图片、绘图

    最近忙着搭建一个聊天用的框架,过几天应该会整理写出来吧,原理不难,但是实现后会省很多事.好久没写博客,周末心血来潮写了个图案锁,这东西没什么技术含量,网上一堆,这次这个图案锁顺便联系了怎么打包使用.a ...

  2. quartz定时任务时间配置

    quartz定时任务时间设置描述(2011-03-03 16:23:50)转载▼标签: quartz时间it 分类: 凌乱小记  这些星号由左到右按顺序代表 :     *    *     *    ...

  3. bzoj1236

    其实这道题目不难,主要要求我们有一个清晰地思路首先可以按位数讨论,这里我把1~9单独讨论了因为除了1位数,每个位数开头的数的开头数字1前面都是-号然后考虑位数的奇偶性当位数为奇数的时候比较简单举个例子 ...

  4. showMonth

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  5. Android 国内镜像

    Android SDK官网国内很难直接访问,除了FQ/VPN等方法还是很不方便. 原有的Android SDK直接下载因http://dl-ssl.google.com/android/reposit ...

  6. PHP的哲学:Simple Is Hard

    原帖地址 PHP框架的繁荣是正确的发展方向吗?   作者 正文 poshboytl    发表时间:2009-01-19   最后修改:2009-04-06   做ROR有一年了, 感觉非常好.配合敏 ...

  7. Fzu Problem 2082 过路费 LCT,动态树

    题目:http://acm.fzu.edu.cn/problem.php?pid=2082 Problem 2082 过路费 Accept: 528    Submit: 1654Time Limit ...

  8. UVA 424 (13.08.02)

     Integer Inquiry  One of the first users of BIT's new supercomputer was Chip Diller. Heextended his ...

  9. Linq to XML 读取XML 备忘笔记

    本文转载:http://www.cnblogs.com/infozero/archive/2010/07/13/1776383.html Linq to XML 读取XML 备忘笔记 最近一个项目中有 ...

  10. Linux 搭建SVN server

    一. SVN 简单介绍 Subversion(SVN) 是一个开源的版本号控制系統, 也就是说 Subversion 管理着随时间改变的数据. 这些数据放置在一个中央资料档案库 (repository ...