兼容ie6,ie7以及firefox的css透明滤镜，文字不继承其透明属性

主要是下面这两句了，当然要用HACK了，主要是IE版本的浏览器不支持background-color的rgba这个东西，而IE只有在透明容器的子节点（文本节点除外）内设置position:relative才能不继承透明滤镜，而FF等浏览器是支持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" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<title>兼容ie6,ie7以及firefox的css透明滤镜，文字不继承其透明属性</title>
<style type="text/css">
	#container{ border:1px solid #c00; background:#f00; *filter:alpha(opacity=50); width:500px; margin:40px auto; line-height:200%; font-size:14px; padding:14px;background:rgba(212,0,0,0.5); }
	#container *{ position:relative;}

</style>
</head>

<body>

	<div id="container">
    	<span>我是内容我是内容我是内容我是内容我</span>
    </div>

</body>
</html>

提示：您可以先修改部分代码再运行，对于jquery等代码需要运行后刷新一次

上一篇：javascript图片拉伸动态效果

下一篇：解决IE6多余字符bug

留下脚印压缩包密码:sosuo8

全部评论:

申明:本站部分文章来自网络,由于各种原因对文章的来源无从考究,如果您是“ 兼容ie6,ie7以及firefox的css透明滤镜，文字不继承其透明属性 ”的原作者，若侵犯您的版权,请与我联系!在此请您原谅我的幼稚和无知!联系方法：email:ahuinan@21cn.com QQ:106494262

感谢以下网友对网站提出的建议：
1、感谢“蓝树叶kiss”网友发现一个评论漏洞。(2009-2-28)
2、感谢“陈臣”对程序优化和seo方面的建议。(2009-3-18)

文章档案

作者：佚名
来源：转载
日期：2010-7-16 20:24:00
点击：230

网友投票(您觉得这篇文章怎样？)

请稍侯......

实用文章总结

文章阅读排行

随便看看

最新评论