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 */
  

  尝试一下