CSS3 顏色(Color)

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

在CSS3中定義顏色

在上一節(jié)中，您學(xué)習(xí)了如何使用color關(guān)鍵字和RGB表示法定義顏色。除此之外CSS3增加了對(duì)作為元素設(shè)置顏色值的一些新的功能的符號(hào)rgba()，hsl()和hsla()。

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

RGBA顏色值

可以使用rgba()功能符號(hào)在RGBA模型（紅色-綠色-藍(lán)色-alpha）中定義顏色。RGBA顏色模型是具有alpha通道的RGB顏色模型的擴(kuò)展，用于指定顏色的不透明度。

alpha參數(shù)接受從0.0（完全透明）到1.0（完全不透明）的值。

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

HSL顏色值

顏色也可以使用hsl()功能符號(hào)定義為HSL模型（色相-飽和度-亮度）。色相表示為色輪或圓形（即以圓形表示的彩虹）的角度（從0到360）。該角度以較少的單位數(shù)給出，因?yàn)樵摻嵌韧ǔＲ远葹閱挝贿M(jìn)行度量，以致該單位隱含在CSS中。

飽和度和亮度以百分比表示。100%飽和度表示全彩，并且0%是灰色陰影。然而，100%亮度為白色，0%亮度是黑色，50%亮度是正常的。查看以下示例：

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

HSLA顏色值

可以使用hsla()功能符號(hào)在HSLA模型（色調(diào)飽和度-亮度-alpha）中定義顏色。HSLA顏色模型是具有Alpha通道的HSL顏色模型的擴(kuò)展，該Alpha通道指定了顏色的不透明度。

alpha參數(shù)接受從0.0（完全透明）到1.0（完全不透明）的值。

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