我正在使用Mootools更改我的background-image css属性:
$(document.body).setStyle('background-image','url('+ pBackground +')');
这是它的工作原理,但如何在图片更改之间产生一个淡入效果?
谢谢, 佩德罗
答案 0 :(得分:4)
你无法专门淡化背景......你必须淡化具有背景的元素。
根据您的情况,我建议使用<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);
}
答案 1 :(得分:1)
同样谨慎,该div的任何子元素也会褪色,因此如果您希望背景淡出而其上的元素保持不透明,则需要绝对定位任何子元素。
当你有可变长度的内容时,绝对定位所有元素会带来其他问题,但也有办法解决这个问题。
答案 2 :(得分:0)
不确定我在说什么,但是因为它不是html文档的一部分,所以它不是'元素'所以javascript应该不能用它。
但是,只是一个想法,并且根据您网站的外观,您可以尝试设置不透明度,模拟身体上的不透明度,这可以产生您想要的效果。