CSS中颜色 hsla表示

定义与用法

hsla() 函数使用色相、饱和度、亮度、透明度来定义颜色。

HSLA 即色相、饱和度、亮度、透明度（英语：Hue, Saturation, Lightness, Alpha ）。

色相（H）是色彩的基本属性，就是平常所说的颜色名称，如红色、黄色等。
饱和度（S）是指色彩的纯度，越高色彩越纯，低则逐渐变灰，取 0-100% 的数值。
亮度（L） 取 0-100%，增加亮度，颜色会向白色变化；减少亮度，颜色会向黑色变化。

透明度（A） 取值 0~1 之间，代表透明度。

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>菜鸟教程(runoob.com)</title>
 6 <style>
 7     :root{
 8         --hue:120;
 9         --s:100%;
10         --l:50%;
11     }
12 #p1 {background-color:hsla(var(--hue,0),var(--s,0),var(--l,0),0.15);}
13 </style>
14 </head>
15 
16 <body>
17 <p>HSL 颜色，并使用透明度:</p>
18 <p id="p1">颜色</p>
19 </body>
20 <script>
21  // 获取body元素，并获取其计算后的背景颜色
22  let _styleTemp = document.documentElement.style;
23  let _p1 = document.getElementById("p1");
24  let _initData = 1;
25  let _initS=1;
26  let _initL=1;
27  let changeS=null;
28  //let changeHue=setInterval(function(){
29 //    _p1.innerText='颜色 H（色相）'+_initData;
30 //    _styleTemp.setProperty('--hue', _initData++);
31 //     if(_initData>360){
32 //                 clearInterval(changeHue);
33 //            }
34 // }, 100);
35  // _initS=1;
36  // changeS=setInterval(function(){
37  //        _p1.innerText='颜色 S（饱和度）:'+_initS;
38  //        _styleTemp.setProperty('--s', (_initS++)+'%');
39 //         if(_initS>100){
40 //            clearInterval(changeS);            
41         //}
42      //},300);
43   _initL=1;
44   changeL=setInterval(function(){
45         _p1.innerText='颜色 L（亮度）:'+_initL;
46         _styleTemp.setProperty('--l', (_initL++)+'%');
47          if(_initL>100){
48             clearInterval(changeL);
49         }
50      },300);
51 </script>
52 </html>

结果其中的一个截图：

posted on 2025-05-23 08:44 华安阅读(61) 评论(0) 收藏举报

刷新页面返回顶部

huaan011

CSS中颜色 hsla表示

定义与用法

导航

公告