CSS – 颜色模式

简介

HTML5中添加了一些新的颜色的表示方式。

RGBA

background-color: rgba(red, green, blue, alpha);

RGBA 就是在 RGB 的基础上加进了一个通道 Alpha. RGBA 在 RGB 的基础上多了控制 alpha 透明度的参数。以上 R、G、B 三个参数，正整数值的取值范围为：0~255. 百分数取值范围为: 0.0%~100.0% . 超出范围的数值将被截至其最接近的取值极限。

并非所有浏览器都支持使用百份数做。A参数，取值在0~1之间，不可为负值。

RGBA 比元素设置 CSS 的透明度整天好，因为单独的颜色可以在不影响整个元素的透明度，他不会影响到元素其他的属性，比如说边框，字体。同时也不会影响到其它元素的相关透明度。

HSLA

HSLA 与 HSL 相同，只是在 HSL 模式上新增了 Alpha 透明度

background-color: hsla(hue, saturation, lightness, alpha);

H: Hue(色调，色相)。0或360 表示红色，120 表示绿色，240 表示蓝色,也可取其他数值来指定颜色。取值为：0~360,过渡为：红橙黄绿青蓝紫红

S:Saturation(饱和度)。取值为：0.0%~100.0%

L : Lightness(亮度)。在PS中是Bightness取值为：0.0%~100.0%, 默认值50%是平衡值

A:Alpha(透明度)。取值 0.0~1

Alpha

在以往的透明度设置中，我们使用 opacity 参数设置元素的透明度，但是这样设置的透明度会使元素内包裹的内容也一并透明，如果我们只想让盒子透明而内容不透明，没有比较好的解决方案。

通过设置 rgba 或 hsla 可以设置盒子透明同时，不让盒子内的内容透明。