<!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=gb2312" />
<title>兼容ie6,ie7以及firefox的css透明滤</title>
<style type="text/css">
#container{ border:1px solid #c00; background-color:rgba(212,0,0,0.5); *background:#f00; *filter:alpha(opacity=50); width:500px; margin:40px auto; line-height:200%; font-size:14px; padding:14px;}
#container *{ position:relative;}
</style>
</head>
<body>
<div id="container">
<span>我是内容我是内容我是内容我是内容</span>
</div>
<p>兼容ie6,ie7以及firefox的css透明滤镜,文字不继承其透明属性。</p>
</body>
</html>
主要是下面这两句了,当然要用HACK了,主要是IE版本的浏览器不支持background-color的rgba这个东西,而IE只有在透明容器的子节点(文本节点除外)内设置position:relative才能不继承其父记得透明滤镜,而FF等浏览器是支持rgba这个东西的。
运行一下看演示,讲的太啰嗦了!


