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％，工作解决方案？

回答

相关问题