CSS hsla() 函数

360 阅读1分钟

一、定义与用法

hsla()函数使用色相(H:hue)、饱和度(S:Sturation)、亮度(L:Lightness)、透明度(A:Alpha)来定义颜色。

  1. 色相(H)

    色彩的基本属性,就是平常所说的颜色名称,如:红色、黄色等。

  2. 饱和度(S)

    色彩的纯度。饱和度越高,色彩越纯;低则逐渐变灰。取值0-100%的数值。

  3. 亮度(L)

    取值0-100%。增加亮度,颜色会向白色变化;减少亮度,颜色会向黑色变化。

  4. 透明度(A)

    取值0-1之间。

二、CSS语法

hsla(hue, saturation, lightness, alpha)
  1. hue:色相。
    • 0或360:红色。
    • 120:绿色。
    • 240:蓝色。
  2. saturation:饱和度。
    • 0%:灰色。
    • 100%:全色。
  3. lightness:亮度。
    • 0%:暗。
    • 50%:普通。
    • 100%:白。
  4. alpha:透明度。
    • 0:完全透明。
    • 1:完全不透明。