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

2022-01-23 00:00:00 javascript html css drupal-7 internet-explorer-8

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

I'm using a drupal 7 module to load in a background image but IE8 doesn't support css3 resizing.

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

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

I can't easily load in the image using the usual methods such as putting it in a DIV or using the ms-filter alphaimageloader to load it.

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

A javascript solution is fine if this can't be done with just CSS that ie8 supports. (Something that also works for ie7 would be fantastic too, but ie8 is the priority).

推荐答案

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

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

Add Full Size Background Image to Internet Explorer 8, and IE7

Since you can't easily place the background in your site using the usual methods, can you place an image within your code? If so, this solution might work. I used it to simulate a full-screen background for IE8 and IE7, and it works well.

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

Place the image right after the body tag in the html code. (You can probably place it elsewhere depending on your site structure, but you may have to add a z-index.) Next, the background in this example is wrapped in an IE Conditional Comment so only IE8 and below will see it. (Note: It's buggy in IE6, but you might be able to get it to work? If not, just adjust the Conditional Comment to include IE7 and IE8 only).

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 的方法:

You probably already know this, but here are 3 ways to target older versions of 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 .ie87-bg {_display: none;} 中关闭自定义 IE 背景的一种方法.

Helpful Tips: background-image:none; overwrites background-size: cover. The _ hack is one way to turn off the custom IE background in IE6 .ie87-bg {_display: none;}.

position:fixed; 在移动/触摸屏中存在问题.默认的 position:scroll; 在触摸时效果很好.背景想法来自本教程 - http://css-tricks.com/完美的整页背景图像/

position:fixed; is buggy in mobile/touch screens. The default position:scroll; works well on touch. The background idea is from this tutorial - http://css-tricks.com/perfect-full-page-background-image/

相关文章