CSS hsla()函数

  • 定义和用法

    hsla()函数使用Hue-saturation-lightness-alpha模型(HSLA)定义颜色。HSLA颜色值是HSL颜色值的扩展,带有alpha通道 - 指定颜色的不透明度。
    特征 说明
    CSS版本 CSS3
  • 浏览器支持

    表中的数字指定了完全支持该属性的第一个浏览器版本。数字后跟-ms-, -webkit-,-moz-或-o-指定使用前缀的第一个版本。
    函数 IE/Edge Chrome FireFox Safari Opera
    函数名称
    hsla()
    9.0
    1.0
    1.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(完全不透明)之间的数字
  • 实例

    使用不透明度定义不同的HSL颜色:
    #p1 {background-color:hsla(120,100%,50%,0.3);} /* green */
    #p2 {background-color:hsla(120,100%,75%,0.3);} /* light green */
    #p3 {background-color:hsla(120,100%,25%,0.3);} /* dark green */
    #p4 {background-color:hsla(120,60%,70%,0.3);} /* pastel green */
    
    尝试一下