IE8（Javascript和CSS）中带拉伸背景的淡入淡出图像背景

我需要创建一个淡入淡出的背景图像，它可以拉伸以填充浏览器。以下代码在除IE8及以下版本之外的所有浏览器中都能完美工作。IE8的问题是，我可以让它褪色但不拉伸，或拉伸但不褪色-不能同时两者

JAVASCRIPT

$(document).ready(function(){

    var imgArr = new Array( // relative paths of images
        'images/bg01.jpg',
        'images/bg02.jpg',
        'images/bg03.jpg',
        'images/bg04.jpg',
        'images/bg05.jpg'
    );


var preloadArr = new Array();
var i;


/* preload images */
for(i=0; i < imgArr.length; i++){
    preloadArr[i] = new Image();
    preloadArr[i].src = imgArr[i];
}

var currImg = 0;
changeImg();
var intID = setInterval(changeImg, 7500);

/* image rotator */
function changeImg(){
$('#bgFade').animate({opacity: 0}, 1000, function(){
$(this).css({
    'background':'url(' + preloadArr[currImg++%preloadArr.length].src +') center 49px',
    '-webkit-background-size':'cover',
    '-moz-background-size':'cover',
    '-o-background-size':'cover',
    'background-size':'cover',
    'filter':'progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\''+ preloadArr[currImg++%preloadArr.length].src +'\', sizingMethod=\'scale\''
    });
}).animate({opacity: 1}, 1000);
}

});

CSS/HTML

#bgFade {
    position:fixed;
    top:0;
    left:0;
    height:100%;
    width:100%;
    z-index:-1;
}

<div id="bgFade"></div>

#bgfead{
位置：固定；
排名：0；
左：0；
身高：100%；
宽度：100%；
z指数：-1；
}

---

我希望有一个解决方案来拉伸和淡化IE8中的背景图像。如果该解决方案仅在IE8中有效，但在IE7或更低版本中无效，则可以。IE8及以上是我目前唯一关心的问题。提前谢谢

据我所知，您正在对html元素使用background属性。如果您尝试使用图像元素并将其分层到内容后面，会怎么样。我认为您应该能够在没有问题的基础上设置宽度和高度（即使在IE8中），然后使用jQuery的.fade（）或设置不透明度的动画。

此过滤器值字符串看起来不太正确

'filter':'progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\''+ preloadArr[currImg++%preloadArr.length].src +'\', sizingMethod=\'scale\''

尝试：

---

谢谢你的回复。。。。这行代码工作正常，只是破坏了渐弱的功能。如果我删除那条线，它会很好地淡出——如果我保留它，它会正确地拉伸图像，但不会淡出动画。谢谢你的回答……我认为这对我需要的不起作用，因为我想保留它作为背景，这样我就可以使用“背景大小：封面”。这会按比例缩放图像而不失真，并且对除IE8之外的所有浏览器都会这样做。我只添加了特效IE，效果很好（拉伸图像），但它只是破坏了淡入淡出的功能。将其作为图像“分层”放在后面，您可以使用

宽度：100%

和

高度：自动

。这应该是成比例的，我认为这甚至可以追溯到IE8。另外，我发现在某些情况下，设置背景比例会影响制作动画时的性能。这很有效。非常感谢你。这是更新后的代码。HTML:CSS:img#bgfead{position:fixed；top:0px；left:0；width:100%；height:auto；z-index:-1；}JavaScript函数changeImg（）{$（'#bgfead'）。animate（{opacity:0}，1000，function（）{$（this）.attr（'src'，preparr[currImg++%preparr.length].src）；}）。animate（{opacity:1}，1000）}再次感谢您！！！！！

'filter':'progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\''+ preloadArr[currImg++%preloadArr.length].src +'\', sizingMethod=\'scale\''

'filter':"progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + preloadArr[currImg++%preloadArr.length].src + "'), sizingMethod='scale'"