Question

很简单，我正试图淡化div的背景图像;我已经看到这个完成了两个div并通过淡出覆盖背景图像的div的背景颜色有效地揭示（即：faux fading in）背景图像。这不会解决我的问题。

如果“掩模”是与主体背景颜色相同的纯色，则上述解决方案有效。在我的情况下，身体的背景是纹理图像，所以这不起作用。我可以设置“mask”div与主体具有相同的背景图像，但是使用z-indexed 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。

请参见此处的示例：

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

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

Answer 3

确定！我花了一些时间来解决这种“挑战”，我想我想出了一个接近你的要求的想法！尽管您只想使用一个div来淡化仅背景图像，但我使用了 jQuery 脚本 clone（）方法。

唯一有一点工作要做的事情就是如果你想淡出一些文字！看看我的剧本，让我知道它是否有帮助！

http://jsfiddle.net/7z8vB/

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

3 个答案: