到目前为止，我已经尝试了很多事情来达到以下效果，但没有成功：
<script type="text/javascript">
var x = 0;
while (true) {
/* change background-image of #slide using some variation
of animate or fadeIn/fadeOut with or without setTimeout */
x++;
}
</script>
有任何想法吗？
使用 jQuery 淡入淡出背景图像？
IT技术
javascript
jquery
html
css
background
2021-03-02 20:47:39
4个回答
您可以淡化背景颜色，但不能淡化背景图像。解决此问题的方法是将您的图像作为<img>标签并默认隐藏它们display:none;。给你的图像position:absolute，z-index:-1让它们像背景一样，在其他一切之后。
这是一个图像一个接一个褪色的快速示例。
HTML
<img src=".." />
<img src=".." />
CSS
img{
position:absolute;
z-index:-1;
display:none;
}
jQuery
function test() {
$("img").each(function(index) {
$(this).hide();
$(this).delay(3000* index).fadeIn(3000).fadeOut();
});
}
test();
在http://jsfiddle.net/RyGKV/检查工作示例
您可以淡化背景图像！进进出出！
jQuery：
$('#yourdiv').animate({opacity: 0}, 0).css("background-image", "url(image.jpeg)").animate({opacity: 1}, 2500);
编辑：
这将淡化整个 div 而不是背景图像。
虽然你不能直接淡入一个background-image. 您可以淡入仅包含一个background-image...的单独元素。
我来到这里是因为我正在寻找一种基于<select>选项更改来淡化背景图像的解决方案。我将我已经写的内容与 Hussein 上面的 jsfiddle 结合起来，并提出了这个jsfiddle.net/v4BMC/。
这最初将两个相同的图像堆叠在一起。当<select>改变时，上面的图像的风格属性被删除，底部图像的src改变，并且顶部图像淡出揭示一个底部。（上图以astyle="display:none"结尾，操作开始时需要去掉，否则无效。）
希望这对其他人有用，而不是太不相关而不能包含在此处！