我正在尝试使用 jQuery 在多个背景图像之间淡入淡出。我目前有:
$(document).ready(function() {
var i = 1;
setInterval(function(){
i = i + 1;
if(i>4) {
i = 1;
}
$('.page1').css({
'background':"url('../img/change/" + i + ".jpg')#131313",
'background-size': 'cover',
"opacity":0.7
});
$('.page1').animate({ opacity: 1 }, { duration: 1600 });
},5000);
})
然而，这会导致背景颜色“#131313”明显褪色。相反，我试图让图像淡入先前图像的“顶部”，从而使一个图像融入另一个图像。我该怎么做呢？
最佳答案
在问题的评论中:“如果您希望交叉淡入淡出两个图像，您将需要两个元素，将它们堆叠在一起，然后在不同方向调整每个元素的不透明度。” ——克里斯·哈迪
更详细一点，不支持动画背景图像，但支持背景颜色。假设您为淡入淡出过渡设置了 CSS 动画，这将应用于背景而不是图像，因此您看到的效果(淡出颜色)是可以预料的。不幸的是，这在 CSS 和 JQuery 中都存在，并且除了多个元素之外没有已知的解决方法。
这里有一个关于如何实现这一点的教程:http://css3.bradshawenterprises.com/cfimg/
关于jQuery 在背景图像之间淡入淡出，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24411813/