小编给大家分享一下css3中hsla()的作用是什么,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧! 在CSS3中,hsla()函数用于使用色相、饱和度、亮度、透
小编给大家分享一下css3中hsla()的作用是什么,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!
在CSS3中,hsla()函数用于使用色相、饱和度、亮度、透明度来定义颜色,语法“hsla(色相值,饱和度值,亮度值,透明度值)”;色相值的取值范围为“0~360”,饱和度和亮度的取值范围为“0%~100%”,透明度的取值范围为“0~1”。
本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。
在css3中,hsla()的作用是定义颜色。
hsla() 函数使用色相、饱和度、亮度、透明度来定义颜色。
HSLA 即色相、饱和度、亮度、透明度(英语:Hue, Saturation, Lightness, Alpha )。
色相(H)是色彩的基本属性,就是平常所说的颜色名称,如红色、黄色等。
饱和度(S)是指色彩的纯度,越高色彩越纯,低则逐渐变灰,取 0-100% 的数值。
亮度(L) 取 0-100%,增加亮度,颜色会向白色变化;减少亮度,颜色会向黑色变化。
透明度(A) 取值 0~1 之间, 代表透明度。
语法:
hsla(hue, saturation, lightness, alpha)
值 | 描述 |
---|---|
hue - 色相 | 定义色相 (0 到 360) - 0 (或 360) 为红色, 120 为绿色, 240 为蓝色 |
saturation - 饱和度 | 定义饱和度; 0% 为灰色, 100% 全色 |
lightness - 亮度 | 定义亮度 0% 为暗, 50% 为普通, 100% 为白 |
alpha - 透明度 | 定义透明度 0(透完全明) ~ 1(完全不透明) |
示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#p1 {background-color:hsla(120,100%,50%,0.3);}
#p2 {background-color:hsla(120,100%,75%,0.3);}
#p3 {background-color:hsla(120,100%,25%,0.3);}
#p4 {background-color:hsla(120,60%,70%,0.3);}
#p5 {background-color:hsla(290,100%,50%,0.3);}
#p6 {background-color:hsla(290,60%,70%,0.3);}
</style>
</head>
<body>
<p>HSL 颜色,并使用透明度:</p>
<p id="p1">绿色</p>
<p id="p2">浅绿</p>
<p id="p3">暗绿</p>
<p id="p4">柔和的绿色</p>
<p id="p5">紫色</p>
<p id="p6">柔和的紫色</p>
</body>
</html>
看完了这篇文章,相信你对“css3中hsla()的作用是什么”有了一定的了解,如果想了解更多相关知识,欢迎关注编程网JavaScript频道,感谢各位的阅读!
--结束END--
本文标题: css3中hsla()的作用是什么
本文链接: https://lsjlt.com/news/94430.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0