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

【问题标题】：Fade in a div's background-image (not the body or fading out a background-color)淡入 div 的背景图像（不是主体或淡出背景颜色）
【发布时间】：2012-06-13 22:34:41
【问题描述】：

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

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

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

【问题讨论】：

可能重复？ Fade In Background image
不，但这比上面提到的效果更接近，但需要一个背景图像并用另一个替换它。不过看到那条线了。谢谢！

标签： javascript jquery html css jquery-ui

【解决方案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>

【讨论】：

【解决方案2】：

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

在此处查看示例：

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

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

【讨论】：

【解决方案3】：

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

唯一需要做的就是如果你想在某些文本中淡入淡出！看看我的脚本，如果有帮助请告诉我！

http://jsfiddle.net/7z8vB/

【讨论】：