从不透明图像半透明背景 [英] Translucent background from opaque image

问题描述

我有我想作为背景使用用户上传的图像（几乎总是JPEG）。为了使它少分心，并保持内容在它清晰，我试图降低其透明度。从本质上讲，我想和喜欢的固色效果的东西 RGBA 。

I have a user-uploaded image (almost always a JPEG) that I'd like to use as a background. To make it less distracting and keep the content over it legible, I'm trying to decrease its opacity. Essentially, I'd like something with an effect like the solid color rgba.

我试着放置在后台一个div负底部边缘顶拉过它的内容：

I've tried placing the background in a div with a negative bottom margin top pull the content over it:

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

然而，似乎hackish的和仅部分地有效。这正是我想要什么，直到透明度在那里扔;它把股利在上面。 （如何透明度影响分层！？）

However, it seems hackish and only partially works. It's exactly what I want until opacity is thrown in there; it puts the div on top. (How does opacity affect layering!?)

我认为的位置是：绝对为背景DIV和内容，所以我可以用的z-index玩但是，打破了模板，这是所有

I considered position: absolute for the background div and the content so I could play with the z-index but that breaks the template this is all in.

我如何得到这个形象是一个半透明的背景是什么？

How do I get this image to be a translucent background?

推荐答案

而不必拉这个图像的顶部的内容，为什么不加一个包装围绕您的内容，并把图像作为包装的背景吗？然后，你可以添加一个半透明的背景，内容，使其更清晰（同时仍然能够看到它下面的图片）。尝试：

Instead of having to pull the content on top of this image, why not just add a wrapper around your content and put the image as a background of that wrapper? Then you can add a semi-transparent background to your content to make it more legible (while still being able to see the image beneath it). Try:

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

我希望这不是太混乱了！

Hopefully that's not too confusing!

这篇关于从不透明图像半透明背景的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！