0

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

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

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

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

4

2 回答 2

3

将全尺寸背景图像添加到 Internet Explorer 8 和 IE7

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

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

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

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

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

于 2013-10-17T09:32:07.680 回答
-1

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

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

于 2013-10-24T07:13:17.347 回答