Question

我正在尝试将背景图像拉伸到父div的100％宽度和高度。 IE8当然不支持background-size。我尝试了以下代码，但它无法正常工作。

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

Answer 1

<img> position:fixed;top:0;left:0;width:100%;height:100%;和z-index使用<div>。遗憾的是，没有办法仅使用CSS在IE 8中实现此行为。

有关详细信息，请参阅以下文章：How Do you Stretch a Background Image in a Web Page。

如果您希望将图像用作给定<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; */
}

{{1}}

Answer 2

我经常使用这篇文章做我的全屏背景:)

http://css-tricks.com/perfect-full-page-background-image/

Answer 3

使用AlphaImageLoader过滤器并将sizingMethod设置为scale似乎可以根据Perfect Full Page Background Image进行操作。

Answer 4

HTML：

<img class="fullscreen" src="fullscreen.jpg" />

CSS：

img.fullscreen {
  border:     0;
  height:     auto;
  left:       0;
  min-height: 100%;
  min-width:  1024px;
  padding:    0;
  position:   fixed;
  top:        0;
  width:      100%;
  z-index:    -1001;
}

Answer 5

看看https://github.com/louisremi/background-size-polyfill。这是一个很好的插件，我的团队的另一名成员遇到了同样的问题。

在解决方案中包含脚本后，将以下行添加到相关的CSS类中，以及您可能希望添加的任何其他大小/定位属性。

-ms-behavior: url(/scripts/backgroundsize.min.htc);

我们已经针对全宽度图像和小部件背景实现了它，它可以实现一种享受。

Answer 6

这个（demo）可以解决这个问题（来自http://css-tricks.com/perfect-full-page-background-image/的css-only技术＃2的可消化版本）：

<div class="background-size_cover">
  <img src="images/body_background2.png">
</div>

和

.background-size_cover {
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  position: relative;
}
.background-size_cover img {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  min-width: 50%;
  min-height: 50%;
  position: absolute;
}

你需要确保父div是overflow: hidden;，除了你希望图像被拉伸适合的任何尺寸。

Answer 7

我将AlfaImageLoader过滤器与css3 background-size合并，并在所有浏览器上运行。这就是我所做的。

background : url('../images/background.jpg') no-repeat ;
background-size: 100%;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader
            (src='images/background.jpg',sizingMethod='scale');

顺便说一下，你需要在这个方法中将背景图像放到你的包装div中。

在IE8中拉伸背景图像

7 个答案: