当前位置：首页 → 问答吧 → 在firefox下,两层div，如何外层透明，内层不透明

在firefox下,两层div，如何外层透明，内层不透明

时间：2008-01-28

来源：互联网

在网上看到相关解决方案，但是。。。试了不起效果。麻烦高手指点下
以下是我的代码
<div id="d1" style="position:static;width:300px;height:300px;background-color:red;opacity:.50;filter: alpha(opacity=50);">
<div id="d2" style="position:relative;width:150px;height:150px;background-color:black;">
</div>
<div class="ft"></div>
</div>
IE下，可正常显示，但firefox下，就都透明了
网上找的解决方案
避免CSS透明度继承：

IE下面，cnt层设了透明度，为了避免影响子层，父层position:static,子层position:relative;
FF下面，cnt层不设透明度，ft层设了透明度，并且让它放在内容下面并充满父层。

<div class="cnt">
<div class="bd">
content here<br/>
content here<br/>
content here<br/>
content here<br/>
content here<br/>
content here
</div>
<div class="ft"></div>
</div>

.cnt{
width:45em;
overflow:hidden; /*必须的，否则ft的透明层将会偏出*/
color:#fff;
position:absolute;/*根据需要设定，不是必须的*/
filter:Alpha(opacity=20);/*IE下的透明度*/
_background:#000;/*IE下的背景色*/
_position:static;/*必须的*/
}

.bd{
position:relative;/*必须的，和父层的position:static对应*/
}

.ft{　　/*FF下，做一个透明层，放在内容下面*/
background:#000;
position:absolute; /*必须*/
top:0;/*必须*/
left:0;/*必须*/
rightright:0;/*必须*/
bottombottom:0;/*必须*/
z-index:-1;/*必须*/
opacity:0.2;/*必须*/
*opacity:1;　/*这个是为了应付其他浏览器*/
*background:transparent; /*IE下是完全透明的*/
}

可是怎么都没有效果，麻烦高手指点

作者: gly25 发布时间: 2008-01-28

mark

作者: changke18 发布时间: 2008-01-28

俺写一个试试看，哈

作者: yixianggao 发布时间: 2008-01-28

作者: ydlchina 发布时间: 2008-01-28

试了试，不行！

俺觉得可以用两个并列的div，然后用js来定位，
毕竟这种效果不是很多！

作者: yixianggao 发布时间: 2008-01-28

给透明的那个DIV的父DIV设置成 position:relative后还要给他个 z-index
你这里就是第一行
<div id="d1" style="position:static; z-index:1 ... 就行了

作者: cgisir 发布时间: 2008-01-28

我也想知道这个效果的实现方法，那位知道啊！！！！

作者: Robin_M 发布时间: 2008-07-10

我也刚碰到这个问题,把里层对象加个position:relative 属性看怎么样

作者: mykzhy 发布时间: 2008-08-24

filter只能在IE中正确显示

作者: szoe5203 发布时间: 2008-08-24

HTML code

<!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>无标题文档</title>

</head>
<body>


<div id="d1" style="width:300px;height:300px; position:relative;"> 
<div id="d2" style="width:150px;height:150px;background-color:black;"> 
</div>
<div style="width:100%; height:100%;background-color:red;opacity:.50;filter: alpha(opacity=50);position:absolute; top:0; left:0; z-index:-1;"></div>
</div> 


</body>
</html>