簡體   English   中英

在IE8中使用拉伸BG淡化圖像背景(JavaScript和CSS)

[英]Fading Image Background with Stretched BG in IE8 (Javascript and 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);
}

});

這是我添加的行,以使其在IE8(及以下版本)中可擴展,但它破壞了衰落功能。 如果IE8支持“ background-size”,那會很好,但不支持。

'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'"

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM