淡入div的背景图像（而不是主体或淡出背景颜色）

Question

Very simply, I'm trying to fade in the background-image of a div; I've seen this done with two divs and effectively revealing (ie: faux fading in) the background-image by fading out the background-color of a div covering the background-image. This will not solve my problem.

The above mentioned solution works if the "mask" is the same solid color as the body background-color. In my case, the body's background is a textured image, so this will not work. I could set the "mask" div to have the same background-image as the body, but having a z-indexed div seems like overkill.

tl;dr I have a div somewhere in the body--how do I fade in its background-image? Thanks!

Answer 1

You need two divs. The first one has no background color and the second one has a background image. Fade the second one (Asherlc proposed a way) and you're done.

.body {background-image:url(bg.png)}
.toFade {opacity=1 ... alternatives }
...

<div>
    <div class=toFade style="background-image:url(img.png)">
        <!-- possible content -->
    </div>
</div>

Answer 2

Not possible as far as I know. You will need 2 images / elements to do this. You could use jquery / jquery ui's toggleClass with a duration.

See examples here:

How to add a fadeIn effect while changing background image using .css in Jquery

jQuery li with image fade in background (fade in class)

Answer 3

Ok! It took me some time to solve this kind of "Challenge" and I think I came up with an idea close to your request! Despite the fact that you want to FadeIn only your background-image with only one div I made a jQuery script using clone() method.

The only thing that has a little work to do is if you want to fade In some text as well! Take a look of my script and let me know if it helped!

http://jsfiddle.net/7z8vB/