您的位置:首页> 前端教程> CSS3教程
文章导航

CSS HSL()

2018-9-26 10:48| 作者: admin| 查看: 1394| 评论: 0|来自: 蚂蚁部落

颜色模式有多种,具体参阅CSS颜色值类型一章节。

本文介绍一下CSS3新增HSL()颜色模式。

如果要设置透明度可以使用HSLA(),具体参阅CSS3 HSLA()一章节。

HSL是Hue、Saturation和Lightness的缩写。

(1).Hue:表示色调或者色相。

(2).Saturation:表示饱和度或者说灰度。

(3).Lightness:表示亮度。

H:取值范围在0-360之间,0和360表示红色,120表示绿色,240表示蓝色。

S:取值范围在0%-100%,0%表示灰色,100%表示全彩色。

L:取值范围在0%-100%,0%表示纯黑色,100%表示纯白色。

由HSL三个不同的值的叠加最终产生各种各样的颜色效果。

浏览器支持:

(1).IE9+浏览器支持此颜色模式。

(2).edge浏览器支持此颜色模式。

(3).谷歌浏览器支持此颜色模式。

(4).火狐浏览器支持此颜色模式。

(5).opera浏览器支持此颜色模式。

(6).safria浏览器支持此颜色模式。

代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style>
#box{
  position:relative;
}
span{
  width:1px;
  height:100px;
  float:left;
}
</style>
<script>
window.onload=function(){
  let obox = document.getElementById("box");
  for (let index = 0; index < 360; index++) {
    let ospan = document.createElement('span');
    ospan.style.background = 'hsl(' + index + ',100%, 50%)';
      obox.appendChild(ospan);
  }
}
</script>
</head>
<body>
<div id="box"></section>
</body>
</html>

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201809/26/105006m7d5r2spsp3d22o5.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

上面演示的是HSL中H色调值由0-360分布规律。

从左到右,颜色大致规律是红、橙、黄、绿、青、蓝、紫。

最左边和最右边都是红色,因为H的值等于0或者360都表示颜色为红色。

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style>
#box{
  position:relative;
}
span{
  width:1px;
  height:100px;
  float:left;
}
</style>
<script>
window.onload=function(){
  let obox = document.getElementById("box");
  for (let index = 0; index < 360; index++) {
    let ospan = document.createElement('span');
    ospan.style.background = 'hsl(100,' + index + '%, 50%)';
      obox.appendChild(ospan);
  }
}
</script>
</head>
<body>
<div id="box"></section>
</body>
</html>

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201809/26/105042uf7l99xnxstenlnf.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

上面代码演示了颜色饱和度逐次变化效果。

可以很明显的看到饱和度由全灰到全彩的变化。

当index值等于100的时候,饱和度已经达到百分之百,也就是已经达到全彩。

即便index值继续增加,由于饱和度已经达到顶点,不会再发生变化。

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style>
#box{
  position:relative;
}
span{
  width:1px;
  height:100px;
  float:left;
}
</style>
<script>
window.onload=function(){
  let obox = document.getElementById("box");
  for (let index = 0; index < 360; index++) {
    let ospan = document.createElement('span');
    ospan.style.background = 'hsl(100,100%, ' + index + '%)';
      obox.appendChild(ospan);
  }
}
</script>
</head>
<body>
<div id="box"></section>
</body>
</html>

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201809/26/105116t8tgj0088fv6vknk.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

上面代码实现了对亮度的演示,由纯黑色过渡到纯白色。0%表示纯黑色,100%表示纯白色。

和前面同样的道理,100%已经到达极限,index值再增加也不会再有变化。


鲜花

握手

雷人

路过

鸡蛋
上一篇:CSS flex-flow下一篇:CSS HSLA()

最新评论

返回顶部