Question

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

$（document.body）.setStyle（'background-image'，'url（'+ pBackground +'）'）;

这是它的工作原理，但如何在图片更改之间产生一个淡入效果？

谢谢，佩德罗

Answer 1

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

根据您的情况，我建议使用<div>，其中包含HTML <body>中的所有内容，即：

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

</div>
</body>

然后，您可以设置#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);
}

Answer 2

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

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

Answer 3

不确定我在说什么，但是因为它不是html文档的一部分，所以它不是'元素'所以javascript应该不能用它。

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

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

3 个答案: