css 控制背景透明度和文字图片透明度

dly · 发表于 2012-3-14 20:13:37

想实现这样的一种效果：
1）500px * 500px 的一个背景图片，设置其透明度为30%；
2）在这个背景图片上面接着进行操作，插入一个图片和相应的文字；

预览结果：
500 * 500的背景图片实现了 30%的透明度效果，但想不到得是这个div里的图片也随着继承了30%透明度的属性，但我想让图片正常显示，找了很多办法，都解决的不是很理想，看大家有没有好的解决办法。
IE：
filter:alpha(opacity=sqlN)
其中 sqlN的值域为[0, 100]

Firefox：
-moz-opacity:sqlN
其中sqlN的值域为[0, 1]

Chrome和Safari：
opacity:sqlN
其中sqlN的值域为[0, 1]

答案：

<style>
div.bg{
width:500px;
height:500px;
border:solid;
}
#bgimg{
width:500px;
height:500px;
background:url(http://www.baidu.com/img/baidu_logo.gif) left top;
filter: Alpha(Opacity=30);
opacity:0.3;
-moz-opacity:0.3;
position:absolute;
z-index:-1;
}
.tra
{
filter: Alpha(Opacity=20);
}
</style>
<div class="bg">
<div id="bgimg"></div>
<img class="tra" src="http://gg.blueidea.com/2009/oracle/CNBI208APP760x90.gif" style="width:150px; height:50px;" />
<p>半透明</p>
<img src="http://gg.blueidea.com/2009/oracle/CNBI208APP760x90.gif" style="width:150px; height:50px;"/>
<p>不透明</p>
</div>

复制代码

css 控制背景透明度和文字图片透明度

相关帖子