不透明图像的半透明背景

Question

我希望将用户上传的图片（几乎总是JPEG格式）用作背景。为了使其不那么分散注意力并使上面的内容易于阅读，我正在尝试降低其不透明度。本质上，我想要一个与纯色rgba具有相同效果的东西。

我已经尝试将背景放置在一个带有负底部边距的div中，以拉动内容覆盖它：

<div style="height: 200px; bottom: -200px; background: url(example.jpg) no-repeat; opacity: 0.5;"></div>
<!-- page content -->

然而，这似乎是一种笨拙的方法，而且只部分生效。直到加入opacity，它才能达到我想要的效果；但是这样会将

放在顶部。(为什么opacity会影响图层呢！？)

我考虑使用position: absolute来控制背景div和内容，这样就可以调整z-index了，但是这会破坏模板。

我该如何使这个图像成为半透明背景？

- Matthew Jacobs

---

你使用的是哪个浏览器？能提供一下截图吗？在我的Chrome上看起来运行良好... - Niklas

我正在Chrome中进行初始测试，但最终需要支持IE7+和任何符合标准的浏览器。 - Matthew Jacobs

Answer 1

不必在这张图片上方添加内容，为什么不只是在你的内容周围添加一个包装器，并将图像作为该包装器的背景呢？然后，您可以为内容添加半透明背景，使其更易读（同时仍然能够看到其下方的图像）。尝试以下代码：

<div class="wrapper" style="background-image: url(example.jpg);" >
    <div class="content">
        ...
    </div>
</div>

CSS：

.wrapper { background: none 0 0 no-repeat; }
.content { background: url(transparency.png); }

希望这不会太难理解！

（这段话无需翻译）

- Wex

---

好的。只需记住，IE6默认不支持PNG透明度，因此如果您计划支持IE6，则建议使用http://www.twinhelix.com/css/iepngfix/。 - Wex