CSS hsla() 函数给元素定义颜色，亮度，饱和度，不透明度-网站技术-云服务器技术网

首页网站技术正文

CSS hsla() 函数给元素定义颜色，亮度，饱和度，不透明度

2022-05-29 463

CSS hsla() 函数给元素定义颜色，亮度，饱和度，不透明度

实例

CSS hsla() 函数给元素定义颜色，亮度，饱和度，不透明度

定义带不透明度的不同的 HSL 颜色：

#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);} /* 柔绿色 */

定义和用法

hsla() 函数使用 Hue-saturation-lightness-alpha 模型（HSLA）定义颜色。

HSLA 颜色值是 HSL 颜色值的扩展，带有 Alpha 通道 - 该通道指定了颜色的不透明度。

CSS 语法

hsla(hue, saturation, lightness, alpha)

值	描述
hue	定义色轮上的度数（从 0 到 360）- 0（或 360）为红色，120 为绿色，240 为蓝色。
saturation	定义饱和度 - 0％是灰度，而 100％是全彩色（完全饱和）。
lightness	定义亮度 - 0％是黑色、50％为正常、100％是白色。
alpha	定义不透明度，介于 0.0（完全透明）和 1.0（完全不透明）之间的数字。

带不透明度的 HSL 颜色：

绿色

浅绿色

深绿色

淡绿色

紫色

淡紫色

标签：
css

发表评论：取消回复

原文链接：https://77isp.com/post/1007.html

=========================================

https://77isp.com/ 为 “云服务器技术网” 唯一官方服务平台，请勿相信其他任何渠道。