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

Question

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

如果"蒙版"与正文背景颜色是相同的纯色，则上述解决方案有效。就我而言，身体的背景是有纹理的图像，所以这是行不通的。我可以将"mask"div设置为与正文具有相同的背景图像，但是使用z索引div似乎有点矫枉过正。

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 更改背景图像时添加淡入淡出效果

jQuery li与图像淡入背景（在类中淡入淡出）

Answer 3

好的！我花了一些时间来解决这种"挑战"，我想我想出了一个接近您要求的想法！尽管事实上你只想淡入只有一个div的背景图像，但我用一个jQuery脚本制作了一个jQuery脚本。克隆（） 方法。

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

http://jsfiddle.net/7z8vB/