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%，此时亮度值控制灰色的明暗程度，色调的取值则无关紧要。

应用

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

例如：

.header {  background: rgba(0, 0, 0, 0.5); /* 不透明度为50%的黑色 */}.search {  background: rgba(255, 255, 255, 0.5); /* 透明度为50%的白色 */}

由于浅色与深色是由半透明的白色与黑色形成的，因袭只需变换底色就可以来变换主题。

同理，如果想让一张图片变得更深或者更前，同样也可以使用具有rgba（）背景色的伪元素。