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() 函数使用色相-饱和度-亮度-alpha 模型(HSLA)定义颜色。
HSLA 颜色值是 HSL 颜色值的扩展,增加了 alpha 通道,该通道指定颜色的不透明度。
版本 | CSS3 |
---|
浏览器支持
表中数字表示该函数完全支持的第一个浏览器版本。
函数 | |||||
---|---|---|---|---|---|
hsla() | 1.0 | 9.0 | 3.0 | 3.1 | 10.0 |
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(完全不透明) |