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(完全不透明) |