我试图使用css具有不透明属性的背景图像，同时仍然有文本显示在图像顶部正常通过(没有不透明属性)。我试过在div id = " page "部分后放置一个右，但它只是将文本推到图像下方。对于如何以一种适用于大多数浏览器的方式解决这个问题，有什么建议吗?
<div id="page" style=" height: 200px; background-image:url('background.jpg'); filter:alpha(opacity=30); -moz-opacity:0.3; -khtml-opacity: 0.3; opacity: 0.3; ">
<div class="home primary_page" id="layout">
<div id="page_content" style>
<div class="lead_copy">
<label for="line1" style=" color: #00A4E4; line-height: 40px; font-size: 33px; margin-left: 30px; font-family: font-family: rooney-web-1; ">Buy the stuff you want from the stores you know, cheaper.</label><br>
<label for="line2" style=" color: #00A4E4; line-height: 60px; font-size: 23px; margin-left: 80px; font-family: font-family: Verdana; ">We source deals for you so you don't have to deal with it.</label><br>
<label for="line3" style=" color: #00A4E4; line-height: 40px; font-size: 28px; margin-left: 25px; font-family: font-family: Verdana; ">Don't see the product you want? Let us know and we'll get it.</label><br><br>
<FORM METHOD="LINK" ACTION="/catalog.php">
<INPUT TYPE="submit" VALUE="Get Started">
</FORM>
</div>
</div>
</div>
</div>
不透明意味着100%的不透明度，你不能透过它看东西。看起来我想要一个透明的图像，而不是不透明的。
最简单的解决方案是将图像保存为png格式，并将其不透明度设置为30%。你已经使用了一个图像。CSS不透明度对于动态元素来说非常方便。可以通过改变实际图像来简单地调整图像-特别是背景图像。如果你真的想使用顶部有文字的不透明图像。你需要确定div的绝对位置，这样你就可以通过z-index堆叠它们。
将图像和文本在div中换行，css位置设置为相对位置。将段落的css位置设置为绝对，并设置top和left css属性。摆弄一下这个例子……http://jsfiddle.net/w5tRz/1/