Question

我有一张我正在使用的图像作为我的背景，我试图让它填满100％的屏幕宽度。我已经应用了背景大小：100％并且在MZF中它可以工作，但在IE中它将不再延伸。有谁知道这方面的工作？

这是HTML ...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        </head>
<body class="body">
            <!--Container to hold everything in the middle of page-->
            <div class="container">
</div>
</body>
</html>

这是CSS ..

.body
{
    background-image: url(final2.gif);
    background-size: 100%;
    background-repeat:no-repeat;
    background-color:#C2C2C2;
}

.container {
    width: 1000px;
    height: 1930px;
    margin-top: 0px;
    margin-right: auto;
    margin-left: auto;
    background-color:blue;
}

Answer 1

请参阅http://jsfiddle.net/j5q63/

您可以在<body>之后使用图片模拟背景：

<img id="bg" src="path/to/your/image.png" />

然后

#bg{
    position:absolute;
    top:0;left:0;
    width:100%;
    z-index:-1;
}

Answer 2

您也可以尝试使用特定于IE的alphaImageLoader。只需添加

.body {
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='final2.gif', sizingMethod='scale');
}

到你的样式表。或者，最好是创建一个新的IE7 / IE8特定的css（包括在conditional comments中）并将此样式放入其中。

Answer 3

您尚未指定要测试的IE版本。这很重要，因为各种版本的IE具有非常不同的功能和怪癖。

在这种情况下，我猜你正在使用IE8，因为在IE8及更早版本中，不支持CSS background-size功能。

有许多解决方案。可悲的是，它们都不是很好，但我建议使用javascript polyfill解决方案，它允许您保留其他浏览器的现有CSS代码。下一个最佳解决方案是使用现有元素后面的<img>标记替换背景图像。 javascript polyfill可能会使用相同的技术，但对您来说是透明的，因此您可以继续使用现有的CSS。

您可以使用的一些脚本：

http://srobbin.com/jquery-plugins/backstretch/
https://github.com/louisremi/jquery.backgroundSize.js （这些都是jquery插件，但如果你不使用它，你应该能够找到那些不需要jquery的插件）。

希望有所帮助。

背景图像不会在IE中一直延伸

3 个答案: