在IE 8及以下版本中拉伸背景圖片

我想通過css加載一張圖片，並將其延伸至整個屏幕。該css：在IE 8及以下版本中拉伸背景圖片

body { 

    background: url(images/reelgoodguide2.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 

    overflow: auto; 
    margin: 0px; 
    padding: 0px; 

}

這在Chrome和Firefox和IE9完美的作品。

如果瀏覽器是IE8或IE7，html中還有一個附加的css文件。這個CSS包含：

但AlphaImageLoader的，而不是

body{ 

    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/reelgoodguide2.jpg', sizingMethod='scale'); 
    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/reelgoodguide2.jpg', sizingMethod='scale')"; 
}

拉伸圖像到整個屏幕，圖像仍然居中，它並沒有調整。

注意：當我打開開發人員工具時，我可以看到css文件在那裏。當我禁用過濾器屬性時，沒有任何反應。任何提示我什麼做錯了？

在此先感謝。

來源

2012-06-18 Dave

好了...擺弄的艱苦位之後，這是我想通了：

第一：
過濾器路徑的圖像是相對於html文件，而不是CSS文件。沮喪

二：
我得到這個應用過濾器工作html而不是body。

我讀的是IE瀏覽器的解決方法並沒有被應用到html但我注意到的是，有（我已經清零後了圖像路徑問題）拉伸bacground圖像，但它是背後一切。

來源

2012-06-18 19:17:46 Dave

哦，我的上帝謝謝你！我一直在嘗試一切，直到我讀到這個，我只有你一個:) – Brent

我認爲單靠CSS是不可能的。搜索超大型。你會發現一些JavaScript庫。

來源

2012-06-18 19:20:30 HerrSerker

不，這是可能的。看到我上面的修復。所以不會讓我接受它。 – Dave

一個更加有用的答案來解決IE8背景的問題是：

下載backgroundsize.min.htc並把它放在你的項目中。

現在，只需在你的CSS添加這些行：

.class_name{ 
    //your other properties 
    background-size: cover; 
    -ms-behavior: url(backgroundsize.min.htc); 
}

注：根據您的項目設置使用url。

享受這個簡單的解決方案。 :)

來源

2014-02-25 03:15:21

在IE 8及以下版本中拉伸背景圖片

回答

相關問題