淡入div的背景图像(不是正文或背景颜色)

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 (i.e.: 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.

很简单，我试着在div的背景图像中淡出;我曾见过用两个divs来做这件事，而且效果很好。:人造褪色)背景图像，通过淡出覆盖背景图像的div的背景颜色。这解决不了我的问题。

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.

如果“面膜”与身体底色相同，则上述解决方案有效。在我的例子中，主体的背景是一个有纹理的图像，所以这将不起作用。我可以将“mask”div设置为与正文具有相同的背景图像，但是使用z索引的div似乎有些过分。

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

tl: dr . I have a div in here in the body——如何在背景图像中淡出?谢谢!

3 个解决方案

#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.

你需要两个div。第一个没有背景颜色，第二个有背景图片。淡入第二个(Asherlc提出了一种方法)，你就完成了。

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

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

#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.

据我所知不可能。您将需要两个图像/元素来完成此操作。您可以使用jquery / jquery ui的toggleClass。

See examples here:

看例子:

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

如何在Jquery中使用.css修改背景图像的同时添加fadeIn效果

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

背景中有图像渐变的jQuery li(类中有图像渐变)

#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.

好的!我花了一些时间来解决这种“挑战”，我想我有了一个接近你要求的想法!尽管您希望仅使用一个div对背景图像进行FadeIn，但我还是使用clone()方法创建了一个jQuery脚本。

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/

#1