IE 8：背景大小：自動100％，工作解決方案？

我想在背景100％的高度在div中，並在X軸上重複BG。IE 8：背景大小：自動100％，工作解決方案？

有了這個代碼，它可以在最現代的瀏覽器：

background: url(/img/bg.jpg); 
background-size: auto 100%;

但背景大小IE <不起作用= 8，所以我要尋找一個解決方案來得到這個在IE 8的工作至少。

我知道IE過濾器的代碼，但這隻能拉伸它的容器div內的bg。但我需要bg重複。

在那裏的任何工作解決方案？也許用jQuery？ Polyfills？

來源

2012-08-17 Melros

審查這個環節不支持IE 8: background-size fix

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
src='images/logo.gif', 
sizingMethod='scale'); 

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

來源

2012-08-17 12:22:48 Carlos

是的，這就是爲什麼我問是否有可能讓它與另一個解決方案，polyfill或jQuery一起工作。 – Melros 2012-08-17 12:24:10

正如我在我的問題中提到的，我已經知道這個過濾器代碼，並且這只是模擬一個背景：在這種情況下，我不需要這個背景。我需要100％的高度和repeat-x。 – Melros 2012-08-17 12:31:10

化背景大小。我在這種情況下做的一個CSS技巧就是有一個真實的圖像並設置爲背景。假設你的所有內容都適用於名爲<div id="myLargeBGDiv">的div。

您需要使該div position: relative;然後，您將製作一個絕對定位的圖像，並將其設置爲top: 0;和left: 0;。

然後你也把你的內容div作爲position: relative;在你的圖像和內容div上設置z-index。

下面是一個示例。

CSS

<style type="text/css"> 
    /*This stretches by width. Set the element's height to 100% where needed. It will work that way as well.*/ 
    #myLargeBgDiv {position:relative;width:100%;} 

    #stretchMe {position:absolute;top:0;left:0;width:100%;height:auto;z-index:33;} 

    #myContentDiv {position:relative;z-index:50;} 
</style>

HTML

<!--html--> 
<div id="myLargeBgDiv"> 
    <img id="stretchMe" src="path/to/image.png" /> 
    <div id="myContentDiv"> 
     THIS IS SOME CONTENT THAT GOES OVER THE IMAGE CREATING THE EFFECT OF BG IMAGE 
    </div> 
</div>

在舊的瀏覽器，其中絕對不踢元素「關流」位置，你可能需要「myContentDiv」作爲絕對位置爲好，但是這會限制你在內容的高度方面所看到的限制。測試之前，確保它確實有效。

來源

2012-08-17 12:39:34

IE 8：背景大小：自動100％，工作解決方案？

回答

相關問題