兼容 css 背景透明滤镜
方法1：
<html>
<head>
<title>无标题文档</title>
<style>
.aa{ background:rgba(248, 248, 248, 0.7) none repeat scroll 0 0 !important;filter:Alpha(opacity=70); background:#F8F8F8; width:200px; height:100px; color:#000;}
.aa *{ position:relative;}
</style>
</head>
<body>
<div class="aa">
<p>这里是透明</p>
</div>
</body>
</html>
方法2：
<!doctype html public "-//w3c//dtd html 4.0 transitional//en">
<html>
<head>
<style>
.translucent{
background:#000;
opacity: 0.3;
filter: progid:dximagetransform.microsoft.alpha(opacity=30);
}
.bg-translucent{
background:rgba(0,0,0,0.5);/*前三个参数为rgb颜色，第四个参数为透明度*/
filter:progid:dximagetransform.microsoft.gradient(startcolorstr=#7f000000,endcolorstr=#7f000000);/*#7f000000的前两位为16进制透明度，后六位为16进制颜色*/
}
</style>
</head>
<body>
<div id="test1" class="translucent" style="width: 100%; height: 200px; border: 1px solid #f0f0f0; position: absolute; left: 0; top: 0; color: #fff; ">
<img style="float: left;" src="http://images.cnblogs.com/cnblogs_com/hongru/262693/o_5.jpg" alt="" />
<div style="background: red; padding: 10px; width: 60px; float: right; color: #fff;">我是不需要半透明的块</div>
</div>
<div id="test2" class="bg-translucent" style="width: 100%; height: 200px; position: absolute; left: 0; top: 250px; color: #fff; "><img style="float: left;" src="http://images.cnblogs.com/cnblogs_com/hongru/262693/o_5.jpg" alt=""/>
<div style="background: red; padding: 10px; width: 60px; float: right; color: #fff;">我是不需要半透明的块</div>
</div>
</body>
</html>
浙公网安备 33010602011771号