CSS3 顏色

CSS3 提供了幾種定義顏色值的新方法。

在 CSS3 中定義顏色

在上幾節中，你已經學習瞭如何使用顏色關鍵字和 RGB 符號 定義顏色。除此之外 CSS3 增加了對作為元件設定顏色值的一些新的功能的符號 rgba() ， hsl() 和 hsla() 。

在下一節中，我們將逐一討論這些顏色模型。

RGBA 顏色值

可以使用 rgba() 功能符號在 RGBA 模型（紅 - 綠 - 藍 - 阿爾法）中定義顏色。RGBA 顏色模型是 RGB 顏色模型的擴充套件，帶有 alpha 通道 - 指定顏色的不透明度。

alpha 引數接受從 0.0 （完全透明）到 1.0 （完全不透明）的值。

h1 {
    color: rgba(0,0,255,0.5);
}
p {
    background-color: rgba(0%,0%,100%,0.3);
}

HSL 顏色值

顏色也可以使用 hsl() 功能符號定義 HSL 模型（色調飽和度 - 亮度） 。色調錶示為色輪或圓的角度（從 0 到 360）（即以圓圈表示的彩虹）。該角度以較小的單位給出，因為角度通常以度為單位來度量，單位隱含在 CSS 中。

飽和度和亮度表示為百分比。 100% 飽和度意味著全綵色， 0% 是一種灰色陰影。然而， 100% 亮度是白色， 0% 亮度是黑色， 50% 亮度是正常的。看看下面的例子：

h1 {
    color: hsl(360,70%,60%);
}
p {
    background-color: hsl(480,50%,80%);
}

提示： 通過定義 red=0=360 ，而其他顏色都繞了一圈擴散，所以 green=120 ， blue=240 等等。作為一個角度，它隱形地包括了 -120=240 ， 480=120 等。

HSLA 顏色值

可以使用 hsla() 功能符號在 HSLA 模型（色調飽和度 - 亮度-α）中定義顏色。HSLA 顏色模型是具有 Alpha 通道的 HSL 顏色模型的擴充套件 - 其指定顏色的不透明度。

alpha 引數接受從 0.0 （完全透明）到 1.0 （完全不透明）的值。

h1 {
    color: hsla(360,80%,50%,0.5);
}
p {
    background-color: hsla(480,60%,30%,0.3);
}