CSS3新增Hsl、Hsla、Rgba色彩模式以及透明属性(转)
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色彩模式以及透明属性(转)的更多相关文章
- CSS3 新增选择器:伪类选择器和属性选择器
一.结构(位置)伪类选择器( : ) 1.:first-child 2.:last-child 3.:nth-child(n)或者:nth-child(2n)或者:nth-child(2n+1) &l ...
- css3新增功能
CSS3新增功能 1 CSS3选择器详解 1.1 基础选择器 通配选择器* 元素选择器E ID选择器#id CLASS选择器.class 群组选择器select1,selectN 1.2 层次选择器 ...
- CSS3新增
1 CSS3 的选择器 1.1 基本选择器 tagName .className #idName * slector,selector,selector 1.2 层级选择器 selector1 sel ...
- CSS3 新增颜色表示方式
一.CSS1&2颜色表示方式(W3C标准) 1.Color name 颜色名称方式(用颜色关键字表示对应的颜色.) 例如:red(红色).blue(蓝色).pink(粉色) 优点:方便快捷而 ...
- css3新增属性API
写在前面:由于CSS5标准还未完全订下来,所以各种内核的浏览器都有自己的标准,为了不使属性混淆,所以各家在各自标准前加了一个前缀. -moz- 主要是firefox火狐 -webikt-主要是chr ...
- 高效开发之SASS篇 灵异留白事件——图片下方无故留白 你会用::before、::after吗 link 与 @import之对比 学习前端前必知的——HTTP协议详解 深入了解——CSS3新增属性 菜鸟进阶——grunt $(#form :input)与$(#form input)的区别
高效开发之SASS篇 作为通往前端大神之路的普通的一只学鸟,最近接触了一样稍微高逼格一点的神器,特与大家分享~ 他是谁? 作为前端开发人员,你肯定对css很熟悉,但是你知道css可以自定义吗?大家 ...
- CSS3新增的选择器和属性
<!doctype html>无标题文档 一.新增的选择器 CSS3新增的属性选择器 {除ie6外的大部分浏览器支持) 序号 选择器 含义 实例 1 E[att^="val&qu ...
- H5和CSS3新增内容总结
CSS3选择器有哪些?答:属性选择器.伪类选择器.伪元素选择器.CSS3新特性有哪些?答:1.颜色:新增RGBA,HSLA模式 文字阴影(text-shadow.) 边框: 圆角(border-rad ...
- HTML5+CSS3新增内容总结!!!!!绝对干货
说到H5C3会不会觉得东西好多啊,今天就整理了一份总结性的内容: CSS3选择器有哪些?答:属性选择器.伪类选择器.伪元素选择器.CSS3新特性有哪些?答:1.颜色:新增RGBA,HSLA模式 文字阴 ...
随机推荐
- WebService:设置服务器提供SOAP1.2的服务
1,访问通过cxf发布的服务 (1)与之前一样,同样可以通过在本地通过wsdl文件和命令行生成Java文件来访问服务. 但是我们既然使用了cxf发布,就要通过cxf的工具生成访问.可以通过cxf目录的 ...
- windows提权操作以及系统开机关机重启代码(用到了LookupPrivilegeValue和AdjustTokenPrivileges调整进程的Token权限)
对于UAC提权操作,一般在编译期间,如果程序有需求要提权,会在编译器里设置,vs2010比较简单,在工程属性里可以直接设置,vs2005稍微有点儿麻烦,参考这篇文章: http://www.seany ...
- 10.在Global全局文件中的Application_BeginRequest示例
只要有人访问本网站,都要执行全局文件的Application_BeginRequest事件.因此我们可以防盗链. 示例要求:凡不是网站本机登录的都给客户端提示,用图片显示. 分析:由于网页在加载时不是 ...
- mysql优化21条经验(转)
今天,数据库的操作越来越成为整个应用的性能瓶颈了,这点对于Web应用尤其明显.关于数据库的性能,这并不只是DBA才需要担心的事,而这更是我们程序 员需要去关注的事情.当我们去设计数据库表结构,对操作数 ...
- 《深度探索c++对象模型》chapter3 Data语意学
一个空的class:如 class X{} ; sizeof(X)==1; sizeof为什么为1,他有一个隐晦的1 byte,那是被编译器安插进去的一个char,这使得class2的两个object ...
- oracle索引再论
ORACLE中索引的数据结构有B树结构和位图结构. 我们通常用的普通索引.反向键索引.函数索引等都是B树结构的,是树状结构:位图结构则只有叶子节点. B树索引操作有唯一性扫描,范围扫描,快速索引全扫描 ...
- Android网络框架Volley(实战篇)
之前讲了ym—— Android网络框架Volley(体验篇),大家应该了解了volley的使用,接下来我们要看看如何把volley使用到实战项目里面,我们先考虑下一些问题: 从上一篇来看 mQu ...
- ECHO.js 纯javascript轻量级延迟加载
演示 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf ...
- Android清除本地数据缓存代码
/* * 文 件 名: DataCleanManager.java * 描 述: 主要功能有清除内/外缓存,清除数据库,清除sharedPreference,清除files和清除自定义目 ...
- DIP开放计算平台介绍
随着平台业务的发展,依赖于Portal(Web)构建的服务架构已逐渐不能满足现有的一些复杂需求(如:使用Hive SQL无法完成计算逻辑),而且对于一些具备编程能力的程序员或数据分析师而言,能够自主控 ...