以往要实现半透明效果，一般都会使用半透明的PNG图片，若要兼容IE6，可能还需要加载一个脚本。但这种方法显然不够简洁优雅，而且使用起来不够灵活：在改变对象大小时，半透明图片得重制。使用CSS3实现半透明背景则简单很多：CSS3的色彩模式可以指定透明度，因此只需在background-color指定一个带有透明度的颜色，即可实现半透明背景。
1.CSS3的RGBA和HSLA色彩模式
RGBA指的是“红色、绿色、蓝色和Alpha透明度”，HSLA指的是“色调、饱和度、亮度和Alpha透明度”，使用这两种模式都可以定义半透明的颜色。我们可以使用基于浏览器的取色器来获取HSL或RGB值的颜色代码，比如Firefox扩展Rainbow、Chrome扩展Eye Dropper。
2.RGBA与HSLA的选择
虽然目前RGBA是主流，但我推荐使用HSLA色彩模式。碰到一个RGBA值，你很难一眼看出它代表什么颜色。如果要对RGBA颜色值进行调整，比如变浓或变浅一点，你无法通过增减其中一个数字来达到目的。而使用HSLA值，只需要将色调设为一个特定值，若希望调整浓淡就调整饱和度，若希望调整明暗则调整亮度。
HSLA中的色调值有一定的规律：
0或360=红色
30=橙色
60=黄色
120=绿色
180=青色
240=蓝色
270=紫色
300=紫红色
亮度为0%，则是黑色；亮度为100%，则是白色。将饱和度设为0%，则亮度值控制着灰色的明暗程度。
HSLA的缺点是，书写时，饱和度和亮度的数值后面必须加百分号。
目前各浏览器除了IE9以下版本外，均支持RGBA和HSLA色彩模式
3.制作半透明的气泡对话框
我们看回之前的例子：利用border-radius实现圆角效果，现在我们给它实现半透明背景，十分简单，只需要在background-color属性加上HSLA或RGBA的颜色值。
blockquote {
margin: 0 0 0 112px;
padding: 10px 15px 5px 15px;
border-top: 1px solid #fff;
background-color:hsla(182,44%,76%,.5);
word-wrap:break-word;
-moz-border-radius:20px;
-webkit-border-radius:20px;
border-radius:20px;
behavior: url(PIE.htc);
}
这里写的“.5”是“0.5”的缩写。完成后的效果如图：
4.针对IE的兼容方案
IE8及之前的浏览器不支持HSLA/RGBA，有以下几种备选方案。
- 为旧浏览器指定不透明背景，并放置在HSLA/RGBA样式之前，则旧浏览器会忽略HSLA/RGBA的定义，使用不透明版本。不过，这样做的话必须使用background的简略写法，而不能使用background-color。另外，IE6/7不支持HSL，因此最好还是采用RGB或16进制色彩模式。因此，对上面的代码，我们可以这样写：
background:#A6DADC; background:hsla(182,44%,76%,.5);
- 使用半透明PNG图片。
- 使用Gradient（渐变）滤镜。
