1.指定顏色的幾種方式
顏色名稱 {color:green;} （預定義/跨瀏覽器的顏色名稱）
RGB {color:rgb(0,0,0);} 即是代表紅、綠、藍，以這三種顏色拼出的
RGBA {color:rgba(0,0,0,0.5);} 前面三位 rgb 和上面一樣，最后一位代表了透明度，這里是 0.5 的透明度
十六進制 {color:#ff0000;}
HSL色彩{color: hsl(120,65%,75%);}
HSLA顏色{color: hsla(120,65%,75%,0.3);}
HSL色彩 IE9, Firefox, Chrome, Safari,和Opera 10+.支持HSL顏色值。
HSL代表色相，飽和度和亮度 - 使用色彩圓柱坐標表示。
HSL顏色值指定：HSL（色調，飽和度，明度）。
色相是在色輪上的程度（從0到360）-0（或360）是紅色的，120是綠色的，240是藍色的。
飽和度是一個百分比值;0％意味着灰色和100％的陰影，是全彩。
亮度也是一個百分點;0％是黑色的，100％是白色的。
HSLA顏色 IE9, Firefox3+, Chrome, Safari,和Opera10+.支持.
HSLA的顏色值是一個帶有alpha通道的HSL顏色值的延伸 - 指定對象的透明度。
指定HSLA顏色值：HSLA（色調，飽和度，亮度，α）
α是Alpha參數定義的不透明度。
Alpha參數是一個介於0.0（完全透明）和1.0（完全不透明）之間的參數。
預定義/跨瀏覽器的顏色名稱 147顏色名稱定義在HTML和CSS的顏色規格(17個標准色加上130多個其他)。下表列出了所有這些，連同其十六進制值。
2.color 規定文本的顏色
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS背景3</title> <style type="text/css"> #p1{ color: blue; } #p2{ color:rgb(155,155,120); } #p3{ color:rgba(155,155,120,0.5); } #p4{ color: #05fff2; } #p5{ color: hsl(250,65%,75%); } #p6{ color: hsla(250,65%,75%,0.3); } </style> </head> <body> <p id="p1">顏色1</p> <p id="p2">顏色2</p> <p id="p3">顏色3</p> <p id="p4">顏色4</p> <p id="p5">顏色5</p> <p id="p6">顏色6</p> </body> </html>
3.opacity 設置元素顏色的透明度，它會進行繼承。
如果只是讓背景有透明度，而不想讓它里面的其它元素進行繼承，可使用 background:rgba();或者background-color:rgba();
所有主流瀏覽器都支持opacity屬性。.
注意：IE8和早期版本支持另一種過濾器屬性。像：filter:Alpha(opacity=50)
opacity:0; 隱藏一個元素，完全不顯示，但是會占空間，只是看不到。
opacity:1; 顯示一個元素。
注意:
如果頁面中想將背景變為透明，而里面的內容不受影響，最好使用rgba，因為opacity會繼承到內容中去。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS背景3</title> <style type="text/css"> p{ background-color: #000000; } #p1{ color: blue; } #p2{ color: blue; opacity: 0.5; } #p3{ color: blue; opacity: 0; } #p4{ color: blue; background:rgb(125,125,125); } #p5{ color: blue; background:rgba(125,125,125,0.5); } #p6{ color: blue; background-color:rgba(125,125,125,0.5); } </style> </head> <body> <p id="p1">顏色1</p> <p id="p2">顏色2</p> <p id="p3">顏色3</p> <p id="p4">顏色4</p> <p id="p5">顏色4</p> <p id="p6">顏色4</p> </body> </html>