淡入淡出背景图像

我有一个工作代码，当我的导航栏中的链接被点击时，改变我的文档背景图像。背景图片立即变化，没有动画。我怎么能做出新的背景图片fadeIn（）; ？淡入淡出背景图像

$('.navigation a').click(function() { 
    currentBg = $(this).attr('href').replace('#', '') +'.jpg'; 
    $('.background').css({'background-image':'url(images/skins/'+currentBg+')'}); 
});

来源

2012-03-01 Blainer

我想知道这一点。 – GeekMasher 2012-03-01 21:11:25

我不相信你可以，唯一的方法（我知道的），将有一个块级元素（DIV为例），其具有的背景和出现的背后其余的内容（绝对定位）并淡入淡出，而不是切换背景。

来源

2012-03-01 21:11:26 rastating

从技术上来说，还有另外一个选择：获取该图像，在画布上绘制一些字母，读回数据/网址并设置背景......但这更加复杂。 – kirilloid 2012-03-01 21:14:09

您不能为改变背景图片的不透明度设置动画。

可能是你可以在不同的部分需要不透明度的图像，然后动画背景的位置，使它给人一种fadeIn行为。

看看这个link它会帮助你。

来源

2012-03-01 21:11:42 ShankarSangoli

没有方法可行淡出的背景图像，你必须创建一个容器，并设置其背景图片让它淡入和淡出。

来源

2012-03-01 21:11:54

我以前浮动前景图像在一个单独的div你想在为“褪色”，然后创建前景图像上一个jQuery淡出效果的背景图像上做了这样的事情。

您可以使用类似的技巧在半透明的“背景”上设置纯文本。

http://css-tricks.com/non-transparent-elements-inside-transparent-elements/

来源

2012-03-01 21:17:46 AshBrad

我同意int0x90。

你可以做的是这样的：

堆栈您的图像在一个div，风格定位绝对的，样式设置一个ID为DIV
绝对
每个图像位置添加一个类活跃，有10
集的div的z-index所有非活动图像的z-index为0
可以使用的z-index以最高的z-index图像拉至堆栈的顶部
将活动类添加到导航栏链接的点击上并将其从前一个点击中删除，以便图像的z-index设置回0并且不会被覆盖。 jQuery中
，你现在可以能够使用不透明的变化和变化

希望这有助于让你开始的速度！

来源

2012-03-01 21:19:58

其他许多人已经说过，除非您使用块元素作为背景，否则这是不可能的。但是，如果你只想要一个动画，你可以有一个.gif作为背景，然后当它的动画完成替换它与真实图像，所以.gif不会迭代本身

来源

2012-03-01 22:42:50

淡入淡出背景图像

回答

相关问题