1

我有一张图像用作背景，并试图让它 100% 填充屏幕的宽度。我已经应用了 background-size: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;
}
4

3 回答 3

1

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

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

到您的样式表。或者，最好创建一个新的 IE7/IE8 特定 css（通过条件注释包含）并将此样式放入其中。

于 2013-12-09T14:57:37.967 回答
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;
}
于 2012-09-02T19:18:23.213 回答
0

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

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

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

您可以使用的一些脚本：

希望有帮助。

于 2012-09-02T20:38:43.597 回答