4

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

如果“掩码”与主体背景颜色相同，则上述解决方案有效。就我而言，身体的背景是带纹理的图像，所以这不起作用。我可以将“掩码”div 设置为与 body 具有相同的背景图像，但使用 z-indexed div 似乎有点矫枉过正。

tl;博士我在身体的某个地方有一个 div - 我如何淡入它的背景图像？谢谢！

4

3 回答 3

3

你需要两个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>
于 2012-06-13T22:44:54.567 回答
2

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

请参阅此处的示例：

如何在 Jquery 中使用 .css 更改背景图像时添加淡入淡出效果

带有图像淡入背景的jQuery li（淡入类）

于 2012-06-13T22:44:11.430 回答
1

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

唯一需要做的就是如果你也想在一些文本中淡入淡出！看看我的脚本，让我知道它是否有帮助！

http://jsfiddle.net/7z8vB/

于 2012-06-14T00:47:04.633 回答