Question

我有一个空div，其中包含的背景图像大于容器的大小。我通过background-image属性使用值（100％100％）修复此问题。在IE8和IE7中打开示例之前，这很好。任何解决方案，甚至是javascript脚本或jquery插件？

即：http://jsbin.com/imirer/1/edit

即：http://jsfiddle.net/bPTzE/

HTML：

<div class="container">
    <div class="background"></div>
</div>

CSS：

.container {
    /* an example width for responsive perpose */
    width: 500px;
}

.background {
    height: 27px;
    background: url("http://s18.postimage.org/jhbol7zu1/image.png") no-repeat scroll 100% 100% transparent;

    /* not working in IE8 and IE7 */
    background-size: 100% 100%;
}

Answer 1

因为background-size是CSS3特定的，IE不支持你必须做这样的事情才能在IE中工作

将你的html和正文设置为

html {overflow-y:hidden}
body {overflow-y:auto}

用div＃page-background

包装想要全屏的图像

#page-background {position:absolute; z-index:-1}

然后把它放在你的html文件中

<div id="page-background">
  <img src="/path/to/your/image" width="100%" height="100%">
</div>

**你将不得不使用某种重置来删除边距和填充，类似这样的

html, body {height:100%; margin:0; padding:0;}

Answer 2

ie7和ie8不支持

背景大小。

您可以使用替代方法在div标记中添加'tag'并为其添加100％的宽度。它完全可扩展。

试试这段代码：

<div class="container">
    <img src="http://s18.postimage.org/jhbol7zu1/image.png" width="100%" />
</div>

或

HTML：

<div class="container">
    <img src="http://s18.postimage.org/jhbol7zu1/image.png" />
</div>

的CSS：

.container img {
     width:100%
 }

背景大小100％在IE8和IE7中不起作用

2 个答案: