透明背景的一点研究

偶然被同事引发的研究(他在做一个透明背景,问了偶),如何设置透明背景。貌似游戏类网站最多这种应用。

透明背景可以是纯色,也可以是背景图,偶只用纯色测试了。

大概思路:由于透明会继承到子元素,从而不能达到满意效果,故写一个冗余标签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(偶WIN7),效果都很好。再打开IETester,看IE6,IE7(也可以用IE8的兼容模式),IE7正常,IE6造反。。。

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

首先想到的是给p加个无限高(不是真的无限,确切说是足够高),然后父级溢出隐藏,没想到真的是一次搞定啊!

#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>

2010年10月14日16:39:23 Release Update: 似乎IE6对left:0;right:0;不感冒了,与以往的测试完全不一样。。。奇怪了。

点击这里查看一个简陋的弹出层样式Demo,只有样式,无功能


			

http://cssor.com/get-transparent-background-color-and-image.html

参与评论

电子邮件地址不会被公开。 必填项已用*标注

*

全部分类
Books(4)code(7)database(6)html&css(24)java(11)JavaScript(48)jQuery(24)linux(20)python(1)React(1)share(1)soft(4)solution(53)thinking(17)vim(9)WordPress(8)前端优化(12)拓展(33)服务器(31)移动开发(4)自然(22)