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

时间:2013-10-16 22:38:34

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

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

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

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

如果仅使用ie8支持的CSS无法实现javascript解决方案。 (也适用于ie7的东西也很棒,但ie8是优先考虑的事项。)

2 个答案:

答案 0 :(得分:3)

将完整大小的背景图像添加到Internet Explorer 8和IE7

由于您无法使用常规方法轻松地将背景放置在您的网站中,您是否可以在代码中放置图像?如果是这样,此解决方案可能会有效我用它来模拟IE8和IE7的全屏幕背景,效果很好。

将图像放在html代码中的body标签后面。 (您可以根据您的站点结构将其放置在其他位置,但您可能必须添加z索引。)接下来,此示例中的背景包含在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;
}

您可能已经知道这一点,但是有三种方法可以定位旧版本的IE:

  1. JavaScript浏览器功能检测 - mattstow.com/layout-engine.html
  2. Css Hacks - BrowserHacks.com
  3. IE Con​​dtional Comments http://msdn.microsoft.com/en-us/library/ms537512%28VS.85%29.aspx
  4. 有用的提示: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/

答案 1 :(得分:-1)

这适用于在IE8中在完整窗口上拉伸图像

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