Translucent background from opaque image
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
.
I've tried placing the background in a div with a negative bottom margin top pull the content over it:
<div 开发者_JS百科style="height: 200px; bottom: -200px; background: url(example.jpg) no-repeat; opacity: 0.5;"></div>
<!-- page content -->
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!?)
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!
精彩评论