CSS hsla() 函數

CSS 函數 CSS 函數

實例

定義 HSL 顏色,并設置透明度:

#p1 {background-color:hsl(120,100%,50%,0.3);} /* 綠色 */ #p2 {background-color:hsl(120,100%,75%,0.3);} /* 淺綠 */ #p3 {background-color:hsl(120,100%,25%,0.3);} /* 暗綠 */ #p4 {background-color:hsl(120,60%,70%,0.3);} /* 柔和的綠色 */

嘗試一下 ?

定義與用法

hsla() 函數使用色相、飽和度、亮度、透明度來定義顏色。

HSL 即色相、飽和度、亮度、透明度(英語:Hue, Saturation, Lightness, Alpha )。

  • 色相(H)是色彩的基本屬性,就是平常所說的顏色名稱,如紅色、黃色等。
  • 飽和度(S)是指色彩的純度,越高色彩越純,低則逐漸變灰,取 0-100% 的數值。
  • 亮度(L) 取 0-100%,增加亮度,顏色會向白色變化;減少亮度,顏色會向黑色變化。
  • 透明度(A) 取值 0~1 之間, 代表透明度。

支持版本:CSS3


瀏覽器支持

表格中的數字表示支持該函數的第一個瀏覽器版本號。

函數
hsla() 1.0 9.0 1.0 3.1 9.5

CSS 語法

hsla(hue, saturation, lightness, alpha)
描述
hue - 色相 定義色相 (0 到 360) - 0 (或 360) 為紅色, 120 為綠色, 240 為藍色
saturation - 飽和度 定義飽和度; 0% 為灰色, 100% 全色
lightness - 亮度 定義亮度 0% 為暗, 50% 為普通, 100% 為白
alpha - 透明度 定義透明度 0(透完全明) ~ 1(完全不透明)

CSS 函數 CSS 函數