我正在使用drupal 7模块加载背景图片,但IE8不支持css3调整大小。
background-image: url('image.jpg');
background-size: cover;
我无法使用常规方法轻松加载图像,例如将其放入DIV或使用ms-filter alphaimageloader加载它。
如果仅使用ie8支持的CSS无法实现javascript解决方案。 (也适用于ie7的东西也很棒,但ie8是优先考虑的事项。)
答案 0 :(得分:3)
由于您无法使用常规方法轻松地将背景放置在您的网站中,您是否可以在代码中放置图像?如果是这样,此解决方案可能会有效我用它来模拟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:
有用的提示: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中在完整窗口上拉伸图像