background:rgba(); 是css3新增的。它非常实用，可以很简单的就做出一个背景透明而内容不透明的遮罩层。
可惜的是IE8及IE8以下并不兼容该属性。但我们可以通过IE下的滤镜来实现rgba的效果。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style> body { margin:0; background:pink; } #box { width:300px; height:300px; margin:100px auto; background:rgb(0, 0, 0); background: rgba(0,0,0,0.7); } p { margin:0; padding:0; font-size:40px; line-height:300px; text-align:center; } </style> <!--[if lt IE 9]> <style type="text/css"> #box { background:transparent; filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#b2000000,endColorstr=#b2000000); zoom: 1; } </style> <![endif]--> </head> <body> <div id="box"> <p>hello world</p> </div> </body> </html>
以上代码即可实现在IE8下兼容background:rgba();
这里只说一下 IE实现的方面
一、<!--[if lt IE 9]>
<![endif]-->
因为IE9浏览器即支持rgba()，也支持filter.会使效果更加透明(IE9以上不会)。所以我们需要兼容代码只需要在IE9以下的浏览器运行。
二、filterw
我们只需要注意 startColorstr=#b2000000,endColorstr=#b2000000。
其中b2是filter的值，相当于0.7的透明度，而后面的000000是black颜色的十六进制代码。
------------------
以下是透明度对应的filter值
（0.1） = （19） （0.2） = （33） （0.3） = （4c）
（0.4） = （66） （0.5） = （7f） （0.6） = （99）
（0.7） = （b2） （0.8） = （c8） （0.9） = （e5）
例子：灰颜色的十六进制代码是#cccccc.透明度为0.5。就写成#7fcccccc;