CSS 顏色
CSS 支援 140 多種顏色名稱、HEX 值、RGB 值、RGBA 值、HSL 值、HSLA 值和透明度。
RGBA 顏色
RGBA 顏色值是 RGB 顏色值的擴充套件，增加了一個 alpha 通道——它指定顏色的不透明度。
RGBA 顏色值使用以下方式指定：rgba(red, green, blue, alpha)。alpha 引數是介於 0.0（完全透明）和 1.0（完全不透明）之間的數字。
rgba(255, 0, 0, 0.2);
rgba(255, 0, 0, 0.4);
rgba(255, 0, 0, 0.6);
rgba(255, 0, 0, 0.8);
以下示例定義了不同的 RGBA 顏色
示例
#p1 {background-color: rgba(255, 0, 0, 0.3);} /* 帶透明度的紅色 */
#p2 {background-color: rgba(0, 255, 0, 0.3);} /* 帶透明度的綠色 */
#p3 {background-color: rgba(0, 0, 255, 0.3);} /* 帶透明度的藍色 */
自己動手試一試 »
HSL 顏色
HSL 代表色相（Hue）、飽和度（Saturation）和亮度（Lightness）。
HSL 顏色值使用以下方式指定：hsl(hue, saturation, lightness)。
- Hue 是色輪上的一個角度（從 0 到 360）
- 0 (或 360) 是紅色
- 120 是綠色
- 240 是藍色
- Saturation 是一個百分比值：100% 是完全的顏色。
- Lightness 也是一個百分比；0% 是暗（黑色），100% 是亮（白色）。
hsl(0, 100%, 30%);
hsl(0, 100%, 50%);
hsl(0, 100%, 70%);
hsl(0, 100%, 90%);
以下示例定義了不同的 HSL 顏色
示例
#p1 {background-color: hsl(120, 100%, 50%);} /* 綠色 */
#p2 {background-color: hsl(120, 100%, 75%);} /* 淺綠色 */
#p3 {background-color: hsl(120, 100%, 25%);} /* 深綠色 */
#p4 {background-color: hsl(120, 60%, 70%);} /* 淡綠色 */
自己動手試一試 »
HSLA 顏色
HSLA 顏色值是 HSL 顏色值的擴充套件，增加了一個 alpha 通道——它指定顏色的不透明度。
HSLA 顏色值使用以下方式指定：hsla(hue, saturation, lightness, alpha)，其中 alpha 引數定義了不透明度。alpha 引數是介於 0.0（完全透明）和 1.0（完全不透明）之間的數字。
hsla(0, 100%, 30%, 0.3);
hsla(0, 100%, 50%, 0.3);
hsla(0, 100%, 70%, 0.3);
hsla(0, 100%, 90%, 0.3);
以下示例定義了不同的 HSLA 顏色
示例
#p1 {background-color: hsla(120, 100%, 50%, 0.3);} /* 帶透明度的綠色 */
#p2 {background-color: hsla(120, 100%, 75%, 0.3);} /* 帶透明度的淺綠色 */
#p3 {background-color: hsla(120, 100%, 25%, 0.3);} /* 帶透明度的深綠色 */
#p4 {background-color: hsla(120, 60%, 70%, 0.3);} /* 帶透明度的淡綠色 */
自己動手試一試 »
不透明度
CSS opacity 屬性設定整個元素的透明度（背景顏色和文字都將是半透明/透明的）。
The opacity property value must be a number between 0.0 (fully transparent) and 1.0 (fully opaque).
rgb(255, 0, 0);opacity:0.2;
rgb(255, 0, 0);opacity:0.4;
rgb(255, 0, 0);opacity:0.6;
rgb(255, 0, 0);opacity:0.8;
請注意，上面的文字也將是半透明/透明的！
以下示例顯示了不同元素的透明度
示例
#p1 {background-color:rgb(255,0,0);opacity:0.6;} /* 帶透明度的紅色 */
#p2 {background-color:rgb(0,255,0);opacity:0.6;} /* 帶透明度的綠色 */
#p3 {background-color:rgb(0,0,255);opacity:0.6;} /* 帶透明度的藍色 */
自己動手試一試 »
