0

我需要创建一个渐变的背景图像，它可以伸展以填充浏览器。以下代码在除 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);
}

});

这是我添加的使其在 IE8（及以下）中拉伸的行，但它破坏了淡入淡出功能。如果 IE8 支持“背景大小”但它不支持，那就太好了。

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

CSS/HTML

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

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

我希望有一个解决方案可以在 IE8 中拉伸和淡化背景图像。如果该解决方案仅适用于 IE8 而不适用于 IE7 或更低版本，那很好。IE8及以上是我目前唯一关心的问题。提前致谢！

4

2 回答 2

1

从我可以看到您正在使用 html 元素的背景属性。如果您尝试使用图像元素并将其分层放在内容后面会怎样。我认为你应该可以只设置宽度和高度（即使在 IE8 中），然后使用 jQuery 的 .fade() 或动画不透明度。

于 2012-04-03T00:23:08.077 回答
0

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

'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'"
于 2012-04-03T00:31:52.300 回答