Question

我正在尝试使用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>

Answer 1

不透明意味着100％的不透明度，你无法看透它。看起来实际上想要一个透明的图像，而不是一个不透明的图像。

最简单的解决方案是将图像保存为png并将其设置为30％不透明度。你已经在使用图像了。 CSS不透明度对于现场元素来说非常方便。可以通过改变实际图像 - 特别是背景图像来简单地调整图像。

如果您真的想要使用带有文本的不透明图像。您需要绝对定位div，以便通过z-index堆叠它们。

Answer 2

将图像和文本换入div中，并将css位置设置为相对值。将段落的css位置设置为绝对值，并设置top和left css属性。摆弄示例...... http://jsfiddle.net/w5tRz/1/

顶部有文字的不透明图像（CSS）

2 个答案: