Question

Css实现背景图片半透明效果。

例如：
<style type="text/css">
.alpha{filter:alpha(opacity=30);width:200px;}
</style>
<div width="1024" height="768">
<img src="C:\\webstudy\\Pic\\2.jpg" class="alpha"/>
<div style="position:relative;left:0px;top:-768px;">
<fontcolor=red>asdfasdfd</font>
<br><br><br><br>sdfsdfsdfsdfsdf<br><br><br>
</div>
</div>
但是这样的话，在图片下方会随着第二个div中的<br>多少而出现一片空白，也就是文字层的占位依然留着，怎样去掉它？使得半透明的图片作为背景显示，而文字浮动在图片之上？Js实现也行！

Answer 1

你的图片跟第二个层在同一个层里，第二个层又是相对定位，当然不行了。

<style type="text/css">
.alpha{filter:alpha(opacity=30);width:400px;}
</style>

<div width="1024" height="768">
<img src="C:\\webstudy\\Pic\\2.jpg" class="alpha"/>
</div>
<div style=" position:absolute;left:0px; top:0px">
<font color=red>asdfasdfd</font>
<br><br><br><br>sdfsdfsdfsdfsdf<br><br><br>
</div>

或者：
<style type="text/css">
.alpha{filter:alpha(opacity=30);width:400px;}
</style>

<div style="position:relative" width="1024" height="768">
<img src="My Pictures/q-1.jpg" class="alpha"/>
<div style="position:absolute;left:0px; top:0px">
<font color=red>asdfasdfd</font>
<br><br><br><br>sdfsdfsdfsdfsdf<br><br><br>
</div>
</div>