这是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()详解:的更多相关文章

  1. 转:【译】CSS3:clip-path详解

    我的一个学生,Heather Banks,想要实现他在Squarespace看到的一个效果: 根据她的以往经验,这个网站的HTML和CSS是完全在她的能力范围以内,于是我帮助她完成了这个效果.显示na ...

  2. CSS3过渡详解-遁地龙卷风

    第二版 0.环境准备 (1)过渡需要浏览器的支持,使用这些属性要加上浏览器厂商的前缀,我用的chrome49已经不需要前缀了, -o- Opera -webkit- Safari.Chrome -mo ...

  3. css3选择器详解

    css中除了早先最早的,ID选择器,class选择器一些以外在css3中新加入了新的选择器,新选择器的使用大大的方便了我们的编程,下面我就说一些css3的选择器的使用方法, p       选择了所有 ...

  4. CSS3 border-image详解、应用

    一.border-image的兼容性 border-image可以说是CSS3中的一员大将,将来一定会大放光彩,其应用潜力真的是非常的惊人.可惜目前支持的浏览器有限,仅Firefox3.5,chrom ...

  5. CSS3 Filter详解(改变模糊度 亮度 透明度等方法)

    CSS3 Filter(滤镜)属性提供了提供模糊和改变元素颜色的功能.CSS3 Fitler 常用于调整图像的渲染.背景或边框显示效果. -webkit-filter是css3的一个属性,Webkit ...

  6. 第四十一课:CSS3 animation详解

    animation是css3的另一个重要的模块,它成型比transition晚,吸取了Flash的关键帧的理念,实用性高. animation是一个复合样式,它可以细分为8个更细的样式. (1)ani ...

  7. css3学习--css3动画详解二(3d效果)

    一.设置3D场景 perspective:800       //浏览器到物体的距离(像素)perspective-origin:50% (x轴) 50% (y轴)    //视点的位置 transf ...

  8. css3学习--css3动画详解一(animation属性)

    ***介绍的属性并不完全,写的都是我认为容易混淆的难点属性,所以属性会在最后综合案例展示~ 一.Keyframes介绍: Keyframes被称为关键帧,其类似于Flash中的关键帧.在CSS3中其主 ...

  9. CSS3圆角详解

    一.CSS3圆角的优点 传统的圆角生成方案,必须使用多张图片作为背景图案.CSS3的出现,使得我们再也不必浪费时间去制作这些图片了,而且还有其他多个优点: * 减少维护的工作量.图片文件的生成.更新. ...

随机推荐

  1. struts2实现改变超链接的显示方式

    问题来源:我们看别人家专业的网站的时候,会发现他们的超链接都是这样的http://www.cnblogs.com/ivictor/p/5522383.html 这是一个连接到某一篇文章的超链接,我们一 ...

  2. mysql中正则表达式的使用

    mysql中正则表达式的性能要高于like,所以这里总结一下正则表达式的使用. 正则表达式的模式及其含义: 下面举例说明其用法: 建表student: create table student(id ...

  3. sqllite 默认当前日期写法

    create table IF NOT EXISTS realpoint(_id integer primary key autoincrement,rountId varchar(50),lng d ...

  4. android 获取设备拔插状态广播事件易漏掉的一行属性!

    我们都知道设备拔插的状态获取需要一个权限   <uses-permission android:name="android.permission.MOUNT_UNMOUNT_FILES ...

  5. linux驱动中printk的使用注意事项

    今天在按键驱动中增加printk(KERN_INFO "gpio_keys_gpio_isr()\n");在驱动加载阶段可以输出调试信息,但驱动加载起来后的信息,在串口端看不到输出 ...

  6. JavaScript的chapterII

    程序流程控制: 1.条件语句——if     if(condition) {statement1}     else {statement2} 例子:     if(i<60 && ...

  7. [OC]宏与const 的使用

    Tip: OS日常工作之常用宏定义大全 (摘录文档地址,感觉还不错,例子简单易懂) extern字符串常量,宏定义字符串常量,怎么选? Define与Const专题 extern字符串常量,宏定义字符 ...

  8. python走起之第十五话

    CSS Positioning(定位) 定位有时很棘手! 决定显示在前面的元素! 元素可以重叠! Positioning(定位) CSS定位属性允许你为一个元素定位.它也可以将一个元素放在另一个元素后 ...

  9. Nginx+Tomcat发布时不间断服务的提供

    原理 1.使用Nginx反向代理事项负载均衡,至少两个Tomcat(tomcatA+TomcatB)同时提供服务. 2.发布时配置Nginx的nginx.conf,只让其中的TomcatA临时提供所有 ...

  10. P​D​F​二​次​开​发​_​i​S​t​y​l​e​P​D​F​表​单​域​的​填​充

    wo讲到PDF表单,我们首先需要认识Adobe定义的PDF表单有哪些.以下是我从网上搜索到的简单介绍: PDF 表单简介 PDF 是可移植文档格式(Portable Document Format)的 ...