RSS
热门关键字:  命名  body  hack  !mi  !im
当前位置 :| 主页>div+css>基础教程>

如何在一个层上面覆盖一个高度自适应的透明层?

来源:[标签:出处] 作者:[标签:作者] 时间:2008-02-19 点击:

  网友JAY刚刚在留言板提出了一个问题,是关于在一个层上面覆盖一个高度100%的透明层的问题。他遇到了一点麻烦,在IE7和FF中没有什么问题,而在IE6中,就出问题了。

  JAY [2007-01-27 00:38:27]
  #L1{position:relative;float:left;}
  #L1 #L2{position:absolute;width:100%;height:100%;top:0px;left:0px;
background:url(...) bottom left no-repeat;}
  %26lt;div id="L1"%26gt;%26lt;img.../%26gt;%26lt;div id="L2"%26gt;%26lt;/div%26gt;%26lt;/div%26gt;
  想用上面的代码实现在img上面盖一层图,不过在IE6里层L2高度不会随L1高度变化,IE7和FF2则可以。这个要怎么办呢

  下面我们着手解决这个问题,首先,需要告诉浏览器我们的body的高度不是未定义的,而是100%。
  div2是div1的子对象。若想让子对象适应父对象的高度,首先就要获取父对象的高,才对去适应它。
  div2是层又叠在父对象div1之上的,我们要明确他们的层叠关系。
  好了,有了上面的基本思路,下面我们动手编码:

* { margin:0; padding:0;}
body { height:100%; }
#div1{
position:relative;
float:left;
height:100%;
}
#div1 #div2{
position:absolute;
width:100%;
height:100%;
top:0;
left:0;
right:0;
bottom:0;
/*background:url(/Image/200821912343023477801.gif) bottom left no-repeat; */
z-index:1;
-moz-opacity:0.5;
filter:alpha(opacity=50);
background:#c00;
}

%26lt;div id="div1"%26gt;
%26lt;img src="/Image/200821912343023477801.gif" /%26gt;
%26lt;div id="div2"%26gt;div div2%26lt;/div%26gt;
%26lt;/div%26gt;

  我们看下面的运行效果。我在IE6和FF下面测试通过!



  我们运行机制所看到的是,本站的logo3在div1中,div2填充了颜色#c00,设置了半透明的效果。div2中的文字层叠在div1之上。div2自动适应div1在高度上的变化。
  你可以在上面的运行代码中的XHTML部分加上:

%26lt;br /%26gt;%26lt;img src="/Image/200821912343023477801.gif" /%26gt;

  再次查看运行效果。得到了div2自动适应div1在高度上的变化。
最新评论共有 0 位网友发表了评论
发表评论
评论内容:不能超过250字,需审核,请自觉遵守互联网相关政策法规。
用户名: 密码:
匿名?
注册
栏目列表