internet-explorer - IE 8：背景大小：自动 100%，工作解决方案？

Question

我试图在 div 中有一个 100% 的背景高度，并在 x 轴上重复 bg。

使用此代码，它适用于大多数现代浏览器：

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

但是背景大小不适用于 IE <= 8。所以我正在寻找一种解决方案来让它至少在 IE 8 上工作。

我知道 IE 过滤器代码，但这只会在它的容器 div 中拉伸 bg。但我需要bg重复。

有什么可行的解决方案吗？也许用 jQuery？填充物？

Answer 1

不支持背景大小。在这种情况下，我做的一个 css 技巧是拥有一个真实的图像并设置为背景。假设您的所有内容都适合一个名为<div id="myLargeBGDiv">.

你需要制作那个 divposition: relative; 然后你制作一个绝对定位的图像并将其设置为top: 0;and 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”作为绝对位置，但这会限制您在内容高度方面看到的限制。之前进行测试以确保它确实有效。

Answer 2

查看此链接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')";