IE8(Javascript和CSS）中带有拉伸BG的渐变图像背景

Fading Image Background with Stretched BG in IE8 (Javascript and CSS)

本文关键字：BG 渐变 背景 图像 Javascript CSS IE8      更新时间：2023-09-26

我需要创建一个渐变背景图像来填充浏览器。以下代码适用于除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及以上是我目前唯一关心的问题。提前感谢！

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

这个筛选值字符串看起来不太正确。

'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'"
相关文章：