在IE8中使用拉伸BG衰減圖像背景（Javascript和CSS）

我需要創建一個延伸以填充瀏覽器的淡化背景圖像。以下代碼在除IE8及以下版本以外的每個瀏覽器都能正常工作。 IE8的問題是，我可以讓它淡入淡出，但不能延伸或拉伸但不會褪色 - 不能同時進行。在IE8中使用拉伸BG衰減圖像背景（Javascript和CSS）

的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\''

THE CSS/HTML

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

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

希望有這兩個拉伸的溶液和在IE8褪色的背景圖像。如果解決方案只適用於IE8，但不適用於IE7或更低版本，那很好。 IE8及以上版本是我目前唯一關心的問題。提前致謝！

來源

2012-04-03 Rusty Rayner

從我可以看到你在HTML元素上使用背景屬性。如果您嘗試使用圖片元素並將其疊加在內容後面，該怎麼辦？我認爲你應該能夠設置寬度和高度沒有問題（即使在IE8），然後使用jQuery的.fade（）或動畫不透明。

來源

2012-04-03 00:23:08 tmartineau

感謝您的答覆...我不認爲這會爲我所需要的工作，因爲我想保持它作爲背景，所以我可以使用「背景 - 大小：蓋」。這樣可以按比例縮放圖像而不會失真，並且對於除IE8以外的每個瀏覽器都是如此。該過濾器我只添加效果IE並且工作正常（拉伸圖像），但它只是打破了衰落功能。 – 2012-04-03 15:00:08

把它作爲一個圖像「分層」在後面，你可以使用'width：100％'和'height：auto'。這應該擴大比例，我認爲這甚至可以追溯到IE8。另外，我發現在某些情況下，設置背景縮放會在執行一些動畫時影響性能。 – tmartineau 2012-04-03 18:12:46

工作。非常感謝你。這是更新的代碼。 HTML： CSS： IMG＃bgFade { \t位置是：固定; \t top：0px; \t left：0; \t寬度：100％; \t身高：自動; \t z-index：-1; } 的JavaScript 功能changeImg（）{。 $（ '＃bgFade'）動畫（{不透明度：0}，1000，功能（）{$ （本）.attr（ 'SRC'，preloadArr [ currImg ++％preloadArr.length] .src）; }）。animate（{opacity：1}，1000）; } 再次感謝你!!!!! – 2012-04-04 18:12:30

此過濾器值字符串看起來不太正確。

'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-03 00:31:52

謝謝你的迴應....這行代碼工作正常，它只是打破了衰落功能。如果我刪除那條線，它會很好地消失 - 如果我將它放在它中，則會正確地延伸圖像，但不會消退淡出的動畫。 – 2012-04-03 14:48:57

在IE8中使用拉伸BG衰減圖像背景（Javascript和CSS）

回答

相關問題