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的出现,使得我们再也不必浪费时间去制作这些图片了,而且还有其他多个优点: * 减少维护的工作量.图片文件的生成.更新. ...

随机推荐

Raytracer
http://www.cnblogs.com/miloyip/archive/2010/03/29/1698953.html http://www.scratchapixel.com/lessons/ ...
C# Socket编程笔记
1.按惯例先来介绍下socket Windows中的很多东西都是从Unix领域借鉴过来的,Socket也是一样.在Unix中,socket代表了一种文件描述符(在Unix中一切都是以文件为单 ...
nfs 配置
服务端1.打印系统版本cat /etc/redhat-release2.检查并安装NFS服务rpm -aq nfs-utils portmap rpcbindyum grouplistyum grou ...
IPMI
ipmitool -I lanplus -H 10.79.62.64 -U admin -P Nbv12345 [chassis power soft]/[raw 6 2 5] ipmiutil [r ...
[POJ2069]Super Star（模拟退火）
题目链接:http://poj.org/problem?id=2069 题意:求一个半径最小的球,使得它可以包围住所有点. 模拟退火,圆心每次都去找最远那个点,这样两点之间的距离就是半径,那么接下来移 ...
fzuoj1111Radar Installation （贪心）
题目大意是在海岸线布置n个雷达,要求雷达的范围要包含所有的小岛: 思路:逆向思维把小岛看成一个个范围,与海岸线的交集,从最左端的开始找 (贪心最左端的点),接着不用一个一个去遍历,直接用前一个的右端点 ...
剑指offer四：链表中倒数第k个结点
输入一个链表,输出该链表中倒数第K个结点 public class ListNode { int val; ListNode next = null; ListNode(int val) { this ...
java的4种代码块
一.普通代码块直接在一个方法中出现的{}就称为普通代码块,例子程序如下: public class CodeDemo01{ public static void main(String[] args ...
SublimeText2 快捷键一览表
SublimeText2 快捷键一览表 Sublime Text比起Notepad++,UltraEdit之类Code编辑器来说,其功能有过之而无不及,配合着各种插件使用,Sublime Text在实 ...
C#操作word的一些基本方法(word打印，插入文件，插入图片，定位页眉页脚，去掉横线)
Microsoft.Office.Interop.Word.Application wordApp = new ApplicationClass() word对象 2. Microsoft.Offic ...

CSS3 HSL()详解:

CSS3 HSL()详解:的更多相关文章

随机推荐

热门专题