缩放背景图像以适合 ie8 窗口答案

【问题标题】：Scale background image to fit ie8 window缩放背景图像以适合 ie8 窗口
【发布时间】：2013-10-16 22:38:33
【问题描述】：

我正在使用 drupal 7 模块加载背景图像，但 IE8 不支持 css3 调整大小。

background-image: url('image.jpg');
background-size: cover;

我无法使用通常的方法轻松加载图像，例如将其放入 DIV 或使用 ms-filter alphaimageloader 加载它。

如果仅使用 ie8 支持的 CSS 无法做到这一点，则可以使用 javascript 解决方案。（也适用于 ie7 的东西也很棒，但 ie8 是优先考虑的）。

【问题讨论】：

标签： javascript html css internet-explorer-8 drupal-7

【解决方案1】：

为 Internet Explorer 8 和 IE7 添加全尺寸背景图片

由于您无法使用通常的方法轻松地将背景放置在您的网站中，您能否在代码中放置一张图片？如果是这样，这个解决方案可能会奏效。我用它来模拟IE8和IE7的全屏背景，效果很好。

将图片放在 html 代码中的 body 标记之后。（根据您的站点结构，您可能可以将其放置在其他位置，但您可能必须添加 z-index。）接下来，此示例中的背景包含在 IE 条件注释中，因此只有 IE8 及以下版本才能看到它。（注意：它在 IE6 中存在问题，但您也许可以让它工作？如果没有，只需调整条件注释以仅包括 IE7 和 IE8）。

HTML 代码

<!DOCTYPE html>
<head></head>
<body>
<!--[if lte IE 8]><img src="../path-to-your-image/your-photo.jpg" class="ie87-bg"><![endif]-->

CSS

.ie87-bg {
display:block;
position:fixed;
top:0;
left:0;
min-height:100%;
min-width:1024px;
width:100%;
height:auto;
margin:0;
padding:0;
}

您可能已经知道这一点，但这里有 3 种针对旧版本 IE 的方法：

JavaScript 浏览器功能检测 - mattstow.com/layout-engine.html
Css 黑客 - BrowserHacks.com
IE 条件评论http://msdn.microsoft.com/en-us/library/ms537512%28VS.85%29.aspx

有用的提示：background-image:none; 覆盖 background-size: cover。 _ hack 是在 IE6 .ie87-bg {_display: none;} 中关闭自定义 IE 背景的一种方法。

position:fixed; 在移动/触摸屏上有问题。默认的position:scroll; 在触摸时效果很好。背景想法来自本教程 - http://css-tricks.com/perfect-full-page-background-image/

【讨论】：

不知道为什么你没有得到赞成票或你的答案没有被接受，但你只是让我停止了 3 小时的头撞墙。条件语句真的为我解决了问题！！！谢谢。

【解决方案2】：

这适用于我在 IE8 的全窗口上拉伸图像

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

【讨论】：