0

我有一张背景图片。我正在拉伸它以使其适合整个页面。但它可以在 IE 以外的浏览器中运行。但是如果我使用背景大小，它可以在 IE9 中运行。但我希望它在 IE8 中工作。这个怎么做？提前致谢。

在其他浏览器和 IE9 中： 在此处输入图像描述

在 IE8 中： 在此处输入图像描述

您可以在页面底部找到差异。这是我的代码：

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

body.BodyBackground {

    margin: 0px;
    background: url(../images/common/header/Background_color.png);
     background-repeat:repeat-x;
    background-attachment:fixed;
    background-position:top center; 
    height: 100%;
    width: 100%;
    border: 0;
    background-size:contain;
    display:inline-block;
    background-color: transparent;


}

div.content{    
    height:100%;
    width:97%;
    background-color: rgb(255, 255, 255);
    margin: 0px 25px 25px 25px;
    height:470px;
    background-position:center;
    background-repeat:no-repeat;
    background-attachment:fixed;

}
4

3 回答 3

4

IE8 不支持background-size属性。

您有以下选择：

  • 使用不需要拉伸的背景图形。

  • 为 IE8 提供不同的背景图像（或根本没有背景图像）
    [编辑]有关如何在没有浏览器黑客攻击的情况下在纯 CSS 中实现这一点的更多信息，请参阅我关于该主题的博客文章。

  • 忽略这个问题，让 IE8 用户看到一个稍微损坏的站点。

  • 使用 CSS3Pie 之类的 polyfill 脚本将background-size功能添加到 IE8。

如果您真的想使用background-size，并且确实需要支持 IE8，那么最后一个选项可能是最适合您的选项。

于 2013-05-10T09:57:01.133 回答
1

CSS3 将实现一个 background-size 属性。但 IE<9 不支持它。

如果要缩放背景渐变，可以使用 img 元素，因为它是缩放的。现在，您不再使用背景来显示 PNG，而是使用 img 元素，并将宽度和高度设置为 100%。

我认为这就是你想要的：

* {
  margin: 0;
  padding: 0;
}

html, body {
    height: 100%;
}

#page {
    position: relative;
    min-height: 100%;
}

#page img {
    background-color: transparent;
    height: 100%;
    left: 0px;
    position: absolute;
    top: 0px;
    width: 100%;
}

标记：

<body>
    <div id="page">
        <img src="../images/common/header/Background_color.png" alt="" />
    </div>
</body>
于 2013-05-10T11:06:21.283 回答
0

虽然与其他答案一样background-size，不支持状态是正确的。还有其他方法可以实现这一点。

您可以使用以下方法在旧 IE 中实现拉伸背景。

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')";

其他尺寸选择sizingMethod：

  • 裁剪图像以适合对象的尺寸。
  • 图片默认。放大或缩小对象的边框以适合图像的尺寸。
  • scale拉伸或缩小图像以填充对象的边界。

不要在htmlorbody标记上使用它，这一点很重要。相反，创建一个fixed具有 100% 宽度和高度的位置 div。

于 2013-06-03T09:55:50.820 回答