Question

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

在其他浏览器和IE9中： enter image description here

在IE8中： enter image description here

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

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;

}

Answer 1

IE8不支持background-size属性。

您有以下选择：

使用不需要拉伸的背景图形。
为IE8提供不同的背景图像（或根本没有背景图像）
[edit] 有关如何实现此目的的更多信息，请参阅my blog post on the subject没有浏览器黑客的纯CSS。
忽略此问题，让IE8用户看到一个稍微破损的网站。
使用CSS3Pie等polyfill脚本将background-size功能添加到IE8。

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

Answer 2

CSS3将实现background-size属性。但是在IE＆lt; 9。

中不支持它

如果要缩放背景渐变，可以使用img元素，因为它是缩放。现在使用img元素而不是使用背景来显示PNG，并将宽度和高度设置为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>

Answer 3

虽然不像其他答案那样状态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的其他尺寸选项：

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

请务必不要在html或body标记上使用此标记。而是创建一个宽度和高度均为100％的fixed位置div。

在IE浏览器中拉伸背景图像

3 个答案: