这是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. PHP是弱类型语言，自动转换，强制转换

    强制转换: (int) - 转换成整型 (bool) - 转换.成布尔型 (float) - 转换成浮点型 (string) - 转换成字符串 (array) - 转换成数组 (object) - 转 ...

  2. 升级python到2.7版本pip不可用

    升级python到2.7版本pip不可用 [root@localhost pip-7.1.2]# pip Traceback (most recent call last): File "/ ...

  3. c++多线程のunique和lazy initation

    unique更方便使用,但是会消耗更多的计算机性能 onceflag保证一个线程被调用一次,防止不能的加锁开锁

  4. git 设置不需要输入密码

    https方式每次都要输入密码,按照如下设置即可输入一次就不用再手输入密码的困扰而且又享受https带来的极速 设置记住密码(默认15分钟): git config --global credenti ...

  5. String高效编程优化（Java）

    1, substring截取超大字符串可能造成的“内存泄漏” 2,+ 操作符的优化和局限 3,StringBuilder和StringBuffer 4,split和StringTokenizer做简单 ...

  6. python 拾贝

    1. 内建的 type() 函数带三个参数时, 将作为强悍的动态类构造器. 如下:   type(name, bases, dict) 返回一个新的type对象. 基本上是 class 语句的动态形式 ...

  7. hive的使用01

    1.安装mysql数据库 1.1 查看本机是否安装了mysql数据库(rpm -qa | grep mysql)

  8. Allegro 导入DXF文件，保留布好的线路信息

    最近智能钥匙产品开发过程中,由于结构装配尺寸的偏差,需要对电路PCB外框OUTLINE进行缩小调整,并且USB插座定位孔改变. Allegro软件在线性绘制方面是有严重缺陷的,想绘制一个异形的板框比较 ...

  9. 关于leetcode中链表中两数据相加的程序说明

    * Definition for singly-linked list. * struct ListNode { * int val; * struct ListNode *next; * }; */ ...

  10. UDP主要丢包原因及具体问题分析

    UDP主要丢包原因及具体问题分析 一.主要丢包原因   1.接收端处理时间过长导致丢包:调用recv方法接收端收到数据后,处理数据花了一些时间,处理完后再次调用recv方法,在这二次调用间隔里,发过来 ...