在IE8中拉伸背景图像 [英] Stretch a background image in IE8

问题描述

我试图将背景图片拉伸到父div的100％宽和高。当然，在IE8中不支持background-size。我尝试下面的代码，但它不工作。

I'm trying to stretch a background image to 100% width and height of the parent div. background-size is not supported in IE8 of-course. I tried the following code but it's not working.

.box:before {
    background: url(images/body_background2.png) no-repeat;
    display: block;
    position: absolute;
    z-index: -1;
    height: 100%;
    width: 100%;
    content: '';
}

推荐答案

使用< img> 与 position：fixed; top：0; left：0; width：100％; height：100％; 负 z-index 。很遗憾，没有办法在IE 8中仅使用CSS实现此行为。

Use a <img> with position:fixed;top:0;left:0;width:100%;height:100%; and negative z-index. There's unfortunately no way to implement this behavior in IE 8 using only CSS.

有关详细信息，请参阅以下文章：如何在网页上延伸背景图片。

See the following article for further information: How Do you Stretch a Background Image in a Web Page.

如果您希望使用作为给定<​​code>< div> 的背景的图像尝试以下方法：

If you wish to use an image as a background for a given <div> try the following approach:

<div class="fullbackground">
    <img class="fullbackground" src="yourImageSrc" />
</div>

.fullbackground{
    position:relative;
}
img.fullbackground{
    position:absolute;
    z-index:-1;
    top:0;
    left:0;
    width:100%; /* alternative: right:0; */
    height:100%; /* alternative: bottom:0; */
}

这篇关于在IE8中拉伸背景图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！