html - 来自不透明图像的半透明背景

Question

我有一张用户上传的图片(几乎总是 JPEG 格式)，我想将其用作背景。为了减少它的注意力并保持上面的内容清晰易读，我试图降低它的不透明度。本质上，我想要像纯色 rgba 这样的效果。

我试过将背景放在底部边距为负的 div 中，顶部将内容拉到上面:

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

但是，它看起来很老套，而且只能部分工作。这正是我想要的，直到 opacity 被扔进去；它把 div 放在最上面。 (不透明度如何影响分层!？)

我考虑过将 position: absolute 作为背景 div 和内容，这样我就可以使用 z-index 了，但这破坏了模板的全部内容。

如何让这张图片成为半透明背景？

Answer 1

与其将内容拉到这张图片之上，不如在您的内容周围添加一个 wrapper 并将图片作为该 wrapper 的背景？然后，您可以为您的内容添加半透明背景以使其更清晰(同时仍然能够看到其下方的图像)。尝试:

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

希望这不会太困惑!