1

我正在使用 Mootools 更改我的背景图像 css 属性：

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

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

谢谢，佩德罗

4

3 回答 3

4

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

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

<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);
}
于 2009-05-26T23:10:42.660 回答
1

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

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

于 2009-05-28T11:44:43.220 回答
0

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

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

于 2009-05-26T22:56:17.323 回答