+ -
当前位置:首页 → 问答吧 → 为什么这个滤镜在ff不兼容啊?

为什么这个滤镜在ff不兼容啊?

时间:2011-01-12

来源:互联网

ie6,7,8是兼容的,
但一直想不明白文字为什么要在#container前面加星号才显示?
<!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> <FCK:meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>兼容ie6,ie7以及firefox的css透明滤镜,文字不继承其透明属性</title> <style type="text/css"> #container{ border:1px solid #c00; background-color:#000; 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> <div style="position:absolute;top:50px;left:400px;width:200px;height:100px;background:yellow;z-index:-3"></div> </body> </html>
 提示:您可以先修改部分代码再运行

作者: rao3324180   发布时间: 2011-01-12


<!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> <FCK:meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>兼容ie6,ie7以及firefox的css透明滤镜,文字不继承其透明属性</title> <style type="text/css"> #container{ border:1px solid #c00;background:rgba(255, 255, 255, 0.8) none repeat scroll 0 0 !important;/*实现FF背景透明,文字不透明*/ filter:Alpha(opacity=80); background:#fff;/*实现IE背景透明*/width:500px; margin:40px auto; line-height:200%; font-size:14px; padding:14px;} #container span{ position:relative;color:red} </style> </head> <body> <div id="container"> <span>我是内容我是内容我是内容我是内容我</span> </div> <div style="position:absolute;top:50px;left:400px;width:200px;height:100px;background:yellow;z-index:-3"></div> </body> </html>
 提示:您可以先修改部分代码再运行

作者: radom   发布时间: 2011-01-12