CSS3 HSL()详解:
这是CSS3新增的颜色表示模式。
在CSS2中,只有RGB(red、green和blue的缩写)和十六进制两种颜色模式。
为了能够支持颜色的透明度,CSS3新增了RGBA(A是Alpha缩写)。
但是无论是RGB、RGBA还是十六进制颜色值,都无法对颜色有一个直观的感受,毕竟大多数人都没有超凡的艺术细胞。
所以CSS3又新增了HSL颜色表示模式和与透明度相关的HSLA模式。
在介绍HSL颜色模式之前,先来对RGB和十六进制颜色值进行一下简单介绍:
一.RGB颜色模式:
RGB模式表示颜色是由red、green和blue三种颜色混合而成。
每一种颜色的最小值是0,最大值是255。
0表示没有对应的颜色,255表示纯色。
例如rgb(255,0,0)表示纯红色,rgb(0,255,0)纯绿色,rgb(0,0,255)纯蓝色,rgb(255,255,255)黑色。
二.十六进制颜色颜色模式:
十六进制颜色值简称HEX,颜色值前面带有#号,格式可以描述为如下:
#RRGGBB
每两位上的值就是RGB上的数字转换16进制后的值。
三.HSL颜色模式:
HSL就是色调(Hue)、饱和度(Saturation)和亮度(Lightness)的缩写。
通过三个颜色通道的叠加实现调节颜色的功能。
H:0(或360)表示红色,120表示绿色,240表示蓝色,也可取其他数值来指定颜色。取值为:0 - 360。
S:取值为:0.0% - 100.0%;0% 意味着灰色,而 100% 是全彩
L:取值为:0.0% - 100.0%;0% 是黑色,100% 是白色。
看一段代码实例,它演示了色调的分步规律:
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>蚂蚁部落</title> <style> section{ position:relative; } div{ width:1px; height:150px; float:left; } </style> <script> window.onload=function(){ var container = document.querySelector('section'); for (var index = 0; index < 360; index++) { var div = document.createElement('div'); div.style.background = 'hsl(' + index + ',100%, 50%)'; container.appendChild(div); } } </script> </head> <body> <section></section> </body> </html>
效果图:是不是红、橙、黄、绿、青、蓝、紫的分布规律非常清晰了。
下面是演示颜色饱和度的代码:
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>蚂蚁部落</title> <style> section{ position:relative; } div{ width:1px; height:150px; float:left; } </style> <script> window.onload=function(){ var container = document.querySelector('section'); for (var index = 0; index < 100; index++) { var div = document.createElement('div'); div.style.background = 'hsl(100,' + index + '%, 50%)'; container.appendChild(div); } } </script> </head> <body> <section></section> </body> </html>
效果图:饱和度从灰色到全彩的变化也是一目了然。
下面对于亮度的演示,代码如下:
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>蚂蚁部落</title> <style> section{ position:relative; } div{ width:1px; height:150px; float:left; } </style> <script> window.onload=function(){ var container = document.querySelector('section'); for (var index = 0; index < 100; index++) { var div = document.createElement('div'); div.style.background = 'hsl(100,100%, ' + index + '%)'; container.appendChild(div); } } </script> </head> <body> <section></section> </body> </html>
效果图:
下面再看一下HSLA的使用,这个就比较简单了,A就是设置透明度的,代码实例如下:
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>蚂蚁部落</title> <style> div { margin:10px; width:150px; height:50px; text-align:center; line-height:50px; } div:first-child { background-color: hsla(100,100%,54%,0.3) } div:last-child { background-color: hsl(100,100%,54%) } </style> </head> <body> <div>蚂蚁部落</div> <div>蚂蚁部落</div> </body> </html>
效果图:
CSS3 HSL()详解:的更多相关文章
- 转:【译】CSS3:clip-path详解
我的一个学生,Heather Banks,想要实现他在Squarespace看到的一个效果: 根据她的以往经验,这个网站的HTML和CSS是完全在她的能力范围以内,于是我帮助她完成了这个效果.显示na ...
- CSS3过渡详解-遁地龙卷风
第二版 0.环境准备 (1)过渡需要浏览器的支持,使用这些属性要加上浏览器厂商的前缀,我用的chrome49已经不需要前缀了, -o- Opera -webkit- Safari.Chrome -mo ...
- css3选择器详解
css中除了早先最早的,ID选择器,class选择器一些以外在css3中新加入了新的选择器,新选择器的使用大大的方便了我们的编程,下面我就说一些css3的选择器的使用方法, p 选择了所有 ...
- CSS3 border-image详解、应用
一.border-image的兼容性 border-image可以说是CSS3中的一员大将,将来一定会大放光彩,其应用潜力真的是非常的惊人.可惜目前支持的浏览器有限,仅Firefox3.5,chrom ...
- CSS3 Filter详解(改变模糊度 亮度 透明度等方法)
CSS3 Filter(滤镜)属性提供了提供模糊和改变元素颜色的功能.CSS3 Fitler 常用于调整图像的渲染.背景或边框显示效果. -webkit-filter是css3的一个属性,Webkit ...
- 第四十一课:CSS3 animation详解
animation是css3的另一个重要的模块,它成型比transition晚,吸取了Flash的关键帧的理念,实用性高. animation是一个复合样式,它可以细分为8个更细的样式. (1)ani ...
- css3学习--css3动画详解二(3d效果)
一.设置3D场景 perspective:800 //浏览器到物体的距离(像素)perspective-origin:50% (x轴) 50% (y轴) //视点的位置 transf ...
- css3学习--css3动画详解一(animation属性)
***介绍的属性并不完全,写的都是我认为容易混淆的难点属性,所以属性会在最后综合案例展示~ 一.Keyframes介绍: Keyframes被称为关键帧,其类似于Flash中的关键帧.在CSS3中其主 ...
- CSS3圆角详解
一.CSS3圆角的优点 传统的圆角生成方案,必须使用多张图片作为背景图案.CSS3的出现,使得我们再也不必浪费时间去制作这些图片了,而且还有其他多个优点: * 减少维护的工作量.图片文件的生成.更新. ...
随机推荐
- struts2实现改变超链接的显示方式
问题来源:我们看别人家专业的网站的时候,会发现他们的超链接都是这样的http://www.cnblogs.com/ivictor/p/5522383.html 这是一个连接到某一篇文章的超链接,我们一 ...
- mysql中正则表达式的使用
mysql中正则表达式的性能要高于like,所以这里总结一下正则表达式的使用. 正则表达式的模式及其含义: 下面举例说明其用法: 建表student: create table student(id ...
- sqllite 默认当前日期写法
create table IF NOT EXISTS realpoint(_id integer primary key autoincrement,rountId varchar(50),lng d ...
- android 获取设备拔插状态广播事件易漏掉的一行属性!
我们都知道设备拔插的状态获取需要一个权限 <uses-permission android:name="android.permission.MOUNT_UNMOUNT_FILES ...
- linux驱动中printk的使用注意事项
今天在按键驱动中增加printk(KERN_INFO "gpio_keys_gpio_isr()\n");在驱动加载阶段可以输出调试信息,但驱动加载起来后的信息,在串口端看不到输出 ...
- JavaScript的chapterII
程序流程控制: 1.条件语句——if if(condition) {statement1} else {statement2} 例子: if(i<60 && ...
- [OC]宏与const 的使用
Tip: OS日常工作之常用宏定义大全 (摘录文档地址,感觉还不错,例子简单易懂) extern字符串常量,宏定义字符串常量,怎么选? Define与Const专题 extern字符串常量,宏定义字符 ...
- python走起之第十五话
CSS Positioning(定位) 定位有时很棘手! 决定显示在前面的元素! 元素可以重叠! Positioning(定位) CSS定位属性允许你为一个元素定位.它也可以将一个元素放在另一个元素后 ...
- Nginx+Tomcat发布时不间断服务的提供
原理 1.使用Nginx反向代理事项负载均衡,至少两个Tomcat(tomcatA+TomcatB)同时提供服务. 2.发布时配置Nginx的nginx.conf,只让其中的TomcatA临时提供所有 ...
- PDF二次开发_iStylePDF表单域的填充
wo讲到PDF表单,我们首先需要认识Adobe定义的PDF表单有哪些.以下是我从网上搜索到的简单介绍: PDF 表单简介 PDF 是可移植文档格式(Portable Document Format)的 ...