高级颜色

我们已经知道颜色可以通过名称、RGB 或十六进制值来定义，但 CSS 3 还允许您使用HSL（色相、饱和度、亮度）进行绘制，以及指定透明度。

这里没有特别的属性——HSL 和 RGBa（“a”代表“alpha”，即“alpha 透明度”）可以应用于任何具有颜色值的属性，例如color、background-color、border-color 或 box-shadow，这只是举了几个例子。

Alpha 透明度

RGBa 为网页设计开启了一个令人兴奋的新维度，允许您设置框或文本的透明度。例如，如果您想让漂亮的背景图像透过标题显现一点点，您可能会使用类似这样的方法


h1 {
    padding: 50px;
    background-image: url(snazzy.jpg);
    color: rgba(0,0,0,0.8);
}

rgb(0,0,0) 的标准值会将标题设置为纯黑色，但 `rgba` 中的第四个值设置了透明度级别，“1”表示完全不透明，“0”表示完全透明。所以 `rgba(0,0,0,0.8)` 表示红色=“0”，绿色=“0”，蓝色=“0”，alpha=“0.8”，合在一起就是 80% 的黑色。

这当然不仅适用于文本，您也可以为整个框设置透明背景色，透明的框阴影……任何地方您可以使用 rgb，都可以使用 rgba。

抛开颜色名称不谈，网页颜色一直以来都偏向于红绿蓝（RGB），无论是通过十六进制代码还是显式的 RBG（或 RGBa）。虽然 HSL 可能没那么直接（尤其是当您的大脑习惯于将颜色分解为红、绿、蓝时），但 HSL 实际上可能更直观，因为它让您直接控制颜色的色调方面，而不是其逻辑成分。

它的用法与 rgb 类似


#smut { color: hsl(36, 100%, 50%) }

然而，每个子值都不是颜色光谱的一部分，它们是

色相 (Hue)（上面示例中的“36”）：从典型的色轮中取任意角度，范围从 0 到 360，其中“0”（和“360”）是红色，“120”是绿色，“240”是蓝色。
饱和度 (Saturation)（示例中的“100%”）：您希望颜色的饱和度是多少，从 0%（无，所以是灰色，取决于亮度）到 100%（全部，拜托）。
亮度 (Lightness)（示例中的“50%”）：从 0%（黑色）到 100%（白色），50% 是“正常”。

因此，这里使用的示例将产生一个橙色（36°），该颜色丰富（100% 饱和度）且鲜艳（50% 亮度）。它等同于 #ff9900、#f90 和 rgb(255, 153, 0)。

嘿，伙计，这种时髦的透明度和 HSL 可以结合使用？！你最好相信它。这是 HSLa


#rabbit { background: hsla(0, 75%, 75%, 0.5) }

您应该能弄清楚这是什么意思，对吧？