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;
时间： 2024-10-10 23:59:14