当前位置: 首页 > ECshop经验共享 > 兼容ie6,ie7以及firefox的css透明滤镜
兼容ie6,ie7以及firefox的css透明滤镜
复制代码
- <!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透明滤镜-77shop.net</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>此处为png透明图片或者内容</span>
- </div>
- <p>兼容ie6,ie7以及firefox的css透明滤镜，文字不继承其透明属性。</p>
- <p>来源：<a href="http://www.designcss.org/" target="_blank">设计CSS</a></p> </body> </html>
主要是下面这两句了，当然要用HACK了，主要是IE版本的浏览器不支持background-color的rgba这个东西，而IE只有在透明容器的子 节点（文本节点除外）内设置position:relative才能不继承其父记得透明滤镜，而FF等浏览器是支持rgba这个东西的。
