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

Question

很简单，我试图淡入div的背景图像； 我已经看到这是通过两个div完成的，并且通过淡出覆盖了背景图像的div的背景颜色来有效地揭示 （即，人造淡入）背景图像。 这不会解决我的问题。

如果“遮罩”与主体背景色具有相同的纯色，则上述解决方案有效。 在我的情况下，身体的背景是带纹理的图像，因此这是行不通的。 我可以将“ mask” div设置为与主体具有相同的背景图像，但是使用z索引的div似乎有点过分。

tl; dr我的身体某处有一个div-如何淡化其背景图像？ 谢谢！

Answer 1

您需要两个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>

Answer 2

据我所知不可能。 您将需要2个图像/元素才能执行此操作。 您可以使用带有持续时间的jquery / jquery ui的toggleClass。

在此处查看示例：

如何在jQuery中使用.css更改背景图像时添加fadeIn效果

具有图像淡入淡出的jQuery Li（在类中淡入淡出）

Answer 3

好！ 我花了一些时间解决这种“挑战”，我想出了一个接近您要求的想法！ 尽管事实上您只想在一个div中仅淡入背景图像 ，但我还是使用clone（）方法制作了一个jQuery脚本。

唯一要做的事就是是否也要淡入一些文字！ 看看我的脚本，让我知道它是否有帮助！

http://jsfiddle.net/7z8vB/