internet-explorer - IE 8 : background-size: auto 100%, 工作解决方案？

Question

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

使用此代码，它可以在大多数现代浏览器上运行:

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

但是 background-size 不适用于 IE <= 8。所以我正在寻找一种解决方案，至少可以让它在 IE 8 上运行。

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

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

Answer 1

不支持背景大小。在这种情况下，我使用的一个 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”作为绝对位置，但这会限制您在内容高度方面看到的限制。之前测试以确保它确实有效。