CSS半透明效果(IE6/IE7/FF兼容)

CSS代码：

<br />
.test {<br />
    background:#000;<br />
    color:white;<br />
    width:200px;<br />
    position:absolute;<br />
    left:10px;<br />
    top:10px;<br />
    filter: Alpha(opacity=10); /* IE */<br />
    -moz-opacity:0.1;    /* FF 主要是为了兼容老版本的FF */<br />
    opacity:0.1;    /* FF */<br />
}<br />

如果想让层变成透明但不想让层里的内容变成透明的，可以用以下的方法(需要用到半透明的PNG图片)：
CSS代码：

<br />
#content {<br />
position: relative;<br />
width: 300px;<br />
line-height: 22px;<br />
height: 300px;<br />
background-color: transparent;<br />
background-image:url(img/bg.png);<br />
_background-image: none;<br />
background-repeat:repeat;<br />
}<br />
#content #content-bg {<br />
_background-color: #FFFFFF;<br />
position: absolute;<br />
width: 100%;<br />
height: 100%;<br />
left: 0px;<br />
top: 0px;<br />
z-index: -10;<br />
filter: Alpha(opacity=60);<br />
}<br />

HTML代码：

<br />
&lt;div id=&quot;content&quot;&gt;<br />
&lt;div id=&quot;content-bg&quot;&gt;&lt;/div&gt;<br />

网页背景是一张固定图片，其上的方框是半透明的，方框里的内容不是半透明，但内容之外的空白都是半透明可以将底部的图片渐显出来。
</div>

这个方法经测试在IE6/7、FF2、Opera9、Safari3.1下可以正常显示，别的浏览器因为条件原因没有测试，有兴趣的朋友可以测试一下。

anyShare分享到：