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() 函数使用色相-饱和度-亮度-透明度模型 (HSLA) 来定义颜色。
HSLA 颜色值是 HSL 颜色值的扩展,它添加了一个 alpha 通道,用于指定颜色的透明度。
版本 | CSS3 |
---|
浏览器支持
表格中的数字指定了完全支持该函数的第一个浏览器版本。
函数 | |||||
---|---|---|---|---|---|
hsla() | 1.0 | 9.0 | 3.0 | 3.1 | 10.0 |
CSS 语法
hsla(色相, 饱和度, 亮度, 透明度)
值 | 描述 |
---|---|
色相 | 定义颜色圆上的一个角度(从 0 到 360) - 0(或 360)是红色,120 是绿色,240 是蓝色 |
饱和度 | 定义饱和度;0% 是灰色阴影,100% 是全色(完全饱和) |
亮度 | 定义亮度;0% 是黑色,50% 是正常,100% 是白色 |
透明度 | 定义透明度,数值在 0.0(完全透明)到 1.0(完全不透明)之间 |