淡入淡出的背景图像（不是正文或淡出背景颜色）

很简单，我试图淡入div的背景图像;我已经看到这样做了两个div，并且通过淡出覆盖背景图像的div的背景颜色来有效地揭示（即：虚假衰减）背景图像。这不会解决我的问题。淡入淡出的背景图像（不是正文或淡出背景颜色）

如果“遮罩”与主体背景颜色具有相同的纯色，上述解决方案将起作用。在我的情况下，身体的背景是一个纹理图像，所以这是行不通的。我可以将“mask”div设置为与body相同的背景图像，但是使用z-indexed div看起来像是过度杀伤。

tl; dr我在身体某处有一个div - 我如何淡入其背景图像？谢谢！

来源

2012-06-13 Cesar Torres

可能重复？ [淡入背景图片]（http://stackoverflow.com/questions/977090/jquery-fade-in-background-image） – Andreas

没有，但这比上面提到的效果更接近，但需要一个背景图像并将其替换和另外一个。看到那个线程，但。谢谢！ –

据我所知，不可能。你将需要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)

来源

2012-06-13 22:44:11

你需要两个div。第一个没有背景色，第二个有背景图像。淡出第二个（阿瑟尔克尔提出了一种方法），你就完成了。

.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-13 22:44:54

好的！我花了一些时间来解决这种“挑战”，我想我提出了一个接近你的要求的想法！尽管要淡入只有你背景图像只有一个div的，其实我做了使用 的clone（）方法一个的jQuery脚本。

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

http://jsfiddle.net/7z8vB/

来源

2012-06-14 00:47:04

淡入淡出的背景图像（不是正文或淡出背景颜色）

回答

相关问题