淡入一个div的background-image（不是body或淡出背景颜色）

Question

简单地说，我正在尝试淡入一个div的背景图像；我看过使用两个div实现的效果，在通过淡出覆盖背景图像的div的背景颜色来“揭示”（即：伪造淡入）背景图像。但这种方法无法解决我的问题。

上述解决方案仅在“遮罩”为与body background-color相同的纯色时有效。在我的情况下，body的背景是一张纹理图像，因此这种方法行不通。我可以将“遮罩”div设置为与body相同的背景图像，但是拥有一个z-indexed div似乎有点过度设计。

简称: 我在body中有一个div-如何淡入其背景图像？谢谢！

- Cesar Torres

---

可能是重复的问题？淡入背景图片 - Andreas

不是，但这比上面提到的效果更接近，它需要一个背景图片并将其替换为另一个。我看到那个线程了。谢谢！ - Cesar Torres

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>

- user1088520

Answer 2

据我所知，这是不可能的。您需要两个图像/元素来完成此操作。您可以使用jquery / jquery ui的toggleClass，并设置持续时间来实现。

在此处查看示例： 如何在使用Jquery中的.css更改背景图像时添加fadeIn效果 具有图像淡入背景（淡入类）的jQuery li

- Moin Zaman

Answer 3

好的！ 我花了一些时间来解决这种“挑战”，我想我想出了一个接近您要求的想法！ 尽管您只想使用一个div淡入您的background-image，但我使用了jQuery脚本，使用clone()方法。

唯一需要做一点工作的是，如果您还想淡入一些文本！ 看看我的脚本，让我知道它是否有帮助！

http://jsfiddle.net/7z8vB/

- Manolisl Makris