3

我有一个空 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%;
}
4

2 回答 2

2

因为 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;}
于 2013-02-05T10:23:37.470 回答
1

ie7 和 ie8 不支持背景大小。

您可以在 div 标签中使用 put '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%
 }
于 2013-02-05T10:23:14.870 回答