使用绝对定位的透明背景研究

 刚刚研究的透明背景设置。貌似游戏类网站最多这种应用。

 

透明背景可以是纯色，也可以是背景图，这里只用纯色测试了。

 

大概思路：由于透明会继承到子元素，从而不能达到满意效果，故写一个冗余标签p，设置背景透明，然后将其绝对定位，

 

并置于内容层之下，达到背景透明的目的。

 

测试代码html结构部分：

 

<div id=”wrap”>
<ul>
<li>拉了拉了拉拉拉拉拉拉</li>
<li>拉了拉了拉拉拉拉拉拉</li>
<li>拉了拉了拉拉拉拉拉拉</li>
<li>拉了拉了拉拉拉拉拉拉</li>
<li>拉了拉了拉拉拉拉拉拉</li>
<li>拉了拉了拉拉拉拉拉拉</li>
</ul>
<p></p>
</div>

 

解释一下，div#wrap是父级元素，ul是正常内容，p就是透明的背景层了。

 

然后是CSS：

 

<style type=”text/css”>
div, p, ul, li {margin:0;padding:0;}
#wrap {position:relative;width:220px; border:1px solid red;}
p {position:absolute;bottom:0;left:0;top:0;right:0;z-index:-1;background:green; opacity:0.3;filter:alpha(opacity=30); }
</style>

 

ok，这就齐了。此前我从未把left、right；top，bottom互相对立的属性写在一起（因为一般都固定高宽，这里谢一下

 

wleatu提示），而写在一起能够达到使p的高度与宽度100%；

 

写完，看FF，Opera，IE8，效果都很好。再打开IETester，看IE6，IE7（也可以用IE8的兼容模式），IE7正常，IE6

 

造反。。。

 

所以最后的收尾工作是给IE6的。

 

首先想到的是给p加个无限高（不是真的无限，确切说是足够高），然后父级溢出隐藏，没想到真的是一次搞定啊！RP好，

 

没烦恼！

#wrap { … overflow:hidden;  }

p  {… height: 999em;} /* 对这里来说， 999em足够高了， 三个点… 代表上面的基础CSS */

 

 

 

OK，完成。完整CSS如下：

 

<style type=”text/css”>
div, p, ul, li {margin:0;padding:0;}
#wrap {position:relative;width:220px; border:1px solid red;overflow:hidden;}
p {position:absolute;bottom:0;left:0;top:0;right:0;height:999em;z-index:-1;background:red; opacity:0.3;filter:alpha(opacity=30); }
</style>

 

 

 

其实，扩展一下，给个足够的宽度也是可以的。这次倒是提醒了我以后写绝对定位元素时可以top,bottom,left,right都写来100%高宽。