身体背景 - 图像改变与淡入淡出效果mootools

I'm changing my background-image css property using Mootools:

我正在使用Mootools更改我的background-image css属性:

$(document.body).setStyle('background-image','url(' + pBackground + ')');

$(document.body).setStyle('background-image','url('+ pBackground +')');

And it's its working, but how can a make one fade effect between picture change?

这是它的工作原理,但如何在图像变化之间产生一种淡化效果呢?

Thanks, Pedro

3 个解决方案

#1

You can't fade a background specifically... you have to fade the element that has the background.

你无法专门淡化背景......你必须淡化具有背景的元素。

For your situation, I would suggest using a <div> that encompasses everything in the <body> of your HTML, ie:

根据您的情况,我建议使用包含HTML 中所有内容的

,即:

<html>
<body>
<div id="main">

</div>
</body>

You could then set the background-image property of the #main div, and do something like this:

然后,您可以设置#main div的background-image属性,并执行以下操作:

function backgroundChange(pBackground)
{
    var m = $('main');
    var fx = new Fx.Tween(m,{
        duration: 1500,
        onComplete: function(){ 
            m.setStyle('background-image','url(' + pBackground + ')');
            m.fade('in');
        }
    });
    fx.start('opacity',1,0);
}

#2

Just as a caution, any child elements of that div will also fade, so if you want the background to fade while elements over it remain opaque, you will need to absolutely position any child elements.

同样谨慎,该div的任何子元素也会褪色,因此如果您希望背景褪色而其上的元素保持不透明,则需要绝对定位任何子元素。

Absolutely positioning all elements brings other problems with it when you have variable length content, but there are ways around that too.

当你有可变长度的内容时,绝对定位所有元素会带来其他问题,但也有办法解决这个问题。

#3

Not sure of what i am saying, BUT since it's not a part of the html document, it's not an 'element' so javascript should not be able to work on it.

不知道我在说什么,但由于它不是html文档的一部分,它不是'元素'所以javascript不应该能够工作。

But, just an idea, and depending on how your site looks, you could try to set an opacity, to simulate an opacity on the body, which can lead to the effect you want..

但是,只是一个想法,并根据您的网站的外观,你可以尝试设置不透明度,模拟身体上的不透明度,这可以产生你想要的效果..

#1