不透明图像的半透明背景

Question

我有一个用户上传的图像（几乎总是JPEG），我想用作背景。为了减少分散注意力并保持内容清晰易读，我试图降低其不透明度。基本上，我喜欢像纯色rgba一样的效果。

我已经尝试将背景放在底部有负底部的div中，然后将内容放在上面：

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

然而，它似乎是hackish，只是部分有效。这是我想要的，直到opacity被扔进那里;它把div放在首位。 （opacity如何影响分层！？）

我考虑了position: absolute背景div和内容，因此我可以使用z-index但是会​​打破模板，这就是全部。

如何将此图像设为半透明背景？

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); }

希望这不会太混乱！