Question

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

我在网上搜索了一些解决方案，但我唯一得到的是我应该img加width: 100%和height:100%并将其作为背景。< / p>

这是唯一的解决方案吗？我已经看到了-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>

Answer 1

使用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文件中 - 适用于没有背景大小的浏览器（仅适用于AKA）

.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%等标记可能会被取用。

Answer 2

查看这篇文章以获得答案：

How do I make background-size work in IE?

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

在IE8中完美运行

Answer 3

给你的图像一个拉伸（或其他任何）的类，并在你的css中放置：

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

请务必将img标记放在<body>标记下方。

Answer 4

我为此写了一个插件：

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>

Answer 5

这适用于IE7

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

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

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

Answer 6

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

AlphaImageLoader

如果在IE中无法使用背景大小，则可能需要使背景图片包含两个图像。第一个图像必须以某种方式放置，因此它可以在IE中自动正确显示，而无需定义背景大小。对于所有其他浏览器，您可以使用背景大小和位置将第二个图像推入正确的位置。现在试试这个......

在Internet Explorer 7中的css背景大小封面

6 个答案: