Internet Explorer 7中的CSS背景大小封面[重复]答案

【问题标题】：css background-size cover in internet explorer 7 [duplicate]Internet Explorer 7中的CSS背景大小封面[重复]
【发布时间】：2011-08-19 05:30:20
【问题描述】：

我知道IE7不支持background-size cover。

我在网上搜索了一些解决方案，但我唯一得到的是我应该将img 与width: 100% 和height:100% 放在一起作为背景。

这是唯一的解决方案吗？我已经看到-ms-filter 的一些解决方案，但它没有用。有人有其他解决方案吗？

1 特别之处：我有超过 1 个 div 有这个 background-size 封面属性。

在 Firefox 中一切正常（多么令人惊讶）。

Edit1：我的代码如下所示：

<div class="section" id="section1">here should be the first picture as the background!!</div>
<div class="section" id="section2">here should be the second picture as the background!!</div>
<div class="section" id="section3">here should be the third picture as the background!!</div>

【问题讨论】：

阅读本文css-tricks.com/perfect-full-page-background-image
@sandeep，你的意思是第一个 ie-fix 吗？
@Sai：嗯，我的意思是位置......无论如何它应该在ie中工作。每个人都知道我的意思..
@eav，用于 ff、chrome 等和 IE 的封面属性，您可以使用与封面属性相同效果的过滤器。
@sandeep，我的 css 中并没有这个代码： filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../img/kiesel.jpg', sizingMethod='scale') ; !important -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../img/kiesel.jpg', sizingMethod='scale')"; !重要

标签： internet-explorer internet-explorer-7 css

【解决方案1】：

给你的图片一个类拉伸（或其他），并在你的 css 中放这个：

img.stretched {
 min-height: 100%;
 min-width: 1024px;
 width: 100%;
 height: auto;
 position: fixed;
 top: 0;
 left: 0;
}

请务必将您的 img 标签放在 <body> 标签的正下方。

【讨论】：

我在 html 中没有图像。这是 css 属性...
@eav ：如果您真的不想在文档中插入 img 标签，至少可以通过 Javascript 动态执行。否则，您将只剩下部分浏览器支持。例如，您可以使用 jQuery：$("#section1").append("<img class='stretched' src='' alt='' />");
是的，没错...多么可悲的是，仍然有一些 Internet Explorer 7 用户...无论如何，我也可以将 img thag 放入第 1 节。那不是我的问题。 :-)
需要添加z-index:-10;在样式中

【解决方案2】：

这适用于我的 IE7

http://kimili.com/journal/the-flexible-scalable-background-image-redux

您可能需要从这里安装 IE9.js 库（适用于许多版本的 IE）

http://code.google.com/p/ie7-js/

【讨论】：

是的，这可能会奏效.. 这是什么 ie7-js？

【解决方案3】：

两个想法： 1.我目前正在尝试查看此过滤器是否有帮助：

AlphaImageLoader

如果背景大小在 IE 中是不可能的，也许你必须让你的背景图片包含两个图像。第一个图像必须以某种方式放置，因此它会自动在 IE 中正确显示，而无需定义背景大小。对于所有其他浏览器，您可以使用 background-size 和 position 将第二张图像推到正确的位置。现在试试这个...

【讨论】：

过滤器在 body 标签上设置或使用自定义字体时会产生不可预知的效果。您的里程可能会有所不同。

【解决方案4】：

使用Modernizr，您可以发现用户浏览器的功能。

通过在标题中链接来安装 Modernizr

<script src="http://www.modernizr.com/downloads/modernizr-latest.js"></script>

在你的 HTML 标签中，

<html class="no-js">

使用 CSS，您可以根据浏览器的支持设置页面样式 - Check the documentation 了解支持的检测。在这种情况下，我们需要 background-size 类

在您的 CSS 文件中 - 对于没有背景大小的浏览器（也就是 IE）

.no-background-size #image{
background-image: url(lol.png);
min-height: 100%;
min-width: 100%;
}

这适用于浏览器：

.background-size #image{
background-image: url(lol.png);
background-size: cover;
}

使用这种方法更符合标准，因为将来min-height: 100% 等标签可能会被使用。

【讨论】：

【解决方案5】：

我为此编写了一个插件：

https://github.com/aramkocharyan/CSS-Background-Size-jQuery-Plugin

<div style="width: 400px; height: 300px;">
    <img class="background-size-cover" src="apple.jpg" />
</div>

<script>
$(document).ready(function() {
    $('.background-size-cover').bgdSize('cover');
});
</script>

【讨论】：

【解决方案6】：

查看此帖子以获得答案：

How do I make background-size work in IE?

-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/someimage.png',sizingMethod='scale')";

在 IE8 中完美运行

【讨论】：