带有淡入淡出效果的身体背景图像变化 mootools答案

【问题标题】：body background-image change with fade effect mootools带有淡入淡出效果的身体背景图像变化 mootools
【发布时间】：2009-05-26 22:50:36
【问题描述】：

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

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

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

谢谢，佩德罗

【问题讨论】：

你想用什么来触发淡入淡出？只是……随机褪色？或者当他们点击某些东西时？

标签： css mootools

【解决方案1】：

您不能专门淡化背景...您必须淡化具有背景的元素。

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

<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);
}

【讨论】：

这是 MooTools 1.2 的代码。如果您使用的是 1.1，则 Fx 类会有所不同。
谢谢，我会测试一下。非常感谢

【解决方案2】：

提醒一下，该 div 的任何子元素也会褪色，因此如果您希望背景褪色而其上的元素保持不透明，则需要绝对定位所有子元素。

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

【讨论】：

是的！我发现了这个问题，但是我用绝对位置定义了淡出 div 之外的子元素，现在看起来很棒！

【解决方案3】：

不知道我在说什么，但是因为它不是 html 文档的一部分，所以它不是一个“元素”，所以 javascript 应该无法处理它。

但是，这只是一个想法，根据您网站的外观，您可以尝试设置不透明度，以模拟身体上的不透明度，这可能会导致您想要的效果..

【讨论】：