1、 css顏色
css顏色由紅、綠、藍三種基色疊加而來。
1.1 rgb:
rgb(red、green、blue)三原色組成，根據這三種顏色組合的不同發光度獲取。取值0-255，每個值有256階，由低到高，0最低，255最高。那總共的組合數是：256×256×256=16777216 種顏色。
示例：rgb(0,0,0) 黑色，rgb(255,0.0) 紅色，rgb(255,192,203) 粉紅色
1.2 rgba:
rgba顏色值是這樣規定的：rgba(red, green, blue, alpha)，比ragb多一個alpha(透明度)。alpha 參數是介於 0.0（完全透明）與 1.0（完全不透明）的數字。
示例：rgba(47,222,151,0.3)
1.3 十六進制色
十六進制顏色是這樣規定的：#RRGGBB，其中的 RR（紅色）、GG（綠色）、BB（藍色）十六進制整數規定了顏色的成分。所有值必須介於 0 與 FF 之間。
示例：#000000黑色，css中可以縮寫為#000。#ffffff/#fff 白色。#0000ff 藍色
十六進制顏色表示法6位數字或字母組成，前面加2位表示透明度，取值00-FF。
示例：#7F0000ff 50%透明
透明度參照表：
| 00% |
FF（不透明） |
50% |
7F |
| 5% |
F2 |
55% |
72 |
| 10% |
E5 |
60% |
66 |
| 15% |
D8 |
65% |
59 |
| 20% |
CC |
70% |
4c |
| 25% |
BF |
75% |
3F |
| 30% |
B2 |
80% |
33 |
| 35% |
A5 |
85% |
21 |
| 40% |
99 |
90% |
19 |
| 45% |
8c |
95% |
0c |
|
|
|
100% |
00（全透明） |
1.4 hsl顏色
HSLA指的是 hue（色調）、saturation（飽和度）、lightness（亮度） - 表示顏色柱面坐標表示法。
HSLA顏色值是這樣規定的：hsl(hue, saturation, lightness)。
Hue 是色盤上的度數（從 0 到 360） - 0 (或 360) 是紅色，120 是綠色，240 是藍色。Saturation 是百分比值；0% 意味着灰色，而 100% 是全彩。Lightness 同樣是百分比值；0% 是黑色，100% 是白色。
1.5 hsla顏色
HSLA 顏色值是 HSL 顏色值的擴展，帶有一個 alpha 通道 - 它規定了對象的不透明度。HSLA 顏色值是這樣規定的：hsla(hue, saturation, lightness, alpha)，其中的 alpha 參數定義不透明度。alpha 參數是介於 0.0（完全透明）與 1.0（完全不透明）的數字。
2、 opacity透明度
顏色的透明度前面已經介紹過，在css中opacity設置html元素的透明度。
- opacity: value|inherit;
| value |
規定不透明度。從 0.0 （完全透明）到 1.0（完全不透明）。 |
| inherit |
應該從父元素繼承 opacity 屬性的值。 |
rgba的設置的透明度不會被子級元素繼承;opacity設置的透明度會被子級元素繼承。
<!DOCTYPE html> <html> <head> <style> div { width:200px; margin:20px; padding:10px; } .d1 { background-color:rgba(255,0,0,0.5); } .d2 { background-color:rgb(255,0,0); opacity:0.5; filter:alpha(opacity=100); /* For IE8 and earlier */ } </style> </head> <body> <div class="d1">RGBA</div> <div class="d2">opacity 字體也變透明了</div> </body> </html>
