CSS学习笔记：RGBA与HSLA

在CSS3中可以使用RGBA和HSLA两种色彩模式，二者均可以用来在设置颜色的同时也指定其透明度。

• RGBA指的是“红色、绿色、蓝色、Alpha透明度（Red-Green-Blue-Alpha）”
  
  • 前三个值取值从0~255或0%~100%
• HSLA指的是“色调、饱和度、亮度、Alpha透明度”
  
  • 色调取值0~360，饱和度和亮度取值0%~100%

其中，Alpha的取值从0~1 , 0代表完全透明，1代表完全不透明。

CSS3仍有opacity属性，但它的作用是使整个元素都半透明，包括前景内容，而不仅仅是背景。

对于二者的取舍：

• RGBA无法直观看出是什么颜色。并且如果想要对颜色进行调整也无法简单做到。

• 使用HSLA则只要将色调值设为一个特定值就可以方便地调整其亮度和饱和度。
  对于色调值，其实就是一个色盘。

  • 0和360对应纯红色
  • 120对应绿色
  • 240对应蓝色

要获取HSLA的黑色值，只要简单的将亮度设置为0%；白色则是亮度100%。对于这两个颜色，色调和饱和度可以设置为任何值。

而要获取HSLA格式的灰色，只需将饱和度设置为0%，此时亮度值控制灰色的明暗程度，色调的取值则无关紧要。

应用

最实用的场景是利用半透明的白色和黑色覆盖背景，得到更浅或更深的颜色。