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>