在Internet Explorer 7中使用CSS background-size cover

Question

在Internet Explorer 7中使用CSS background-size cover

internet-explorerinternet-explorer-7css

16

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

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

这是唯一的解决方案吗？我看到了一些关于-ms-filter的解决方案，但没有起作用。有人有其他的解决方案吗？

1个特殊的事情：我有多个具有此background-size覆盖属性的div。

在Firefox中一切都正常（真出乎意料）。

编辑1：我的代码如下：

<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>

- eav

4

请阅读这篇文章：http://css-tricks.com/perfect-full-page-background-image/ 该文章讲述了如何实现完美的全屏背景图片，我将为您翻译其内容。 - sandeep

@sandeep，你是指第一个ie-fix吗？ - eav

@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')"; !important - eav

@eva，他是在写覆盖属性流的div，如果你想让它不随滚动条滚动，那么给这个div设置position:fixed; width和height都为100%。这不仅适用于IE，也适用于其他浏览器。 - sandeep

@sandeep，我觉得我们彼此之间存在误解...用Internet Explorer浏览这个网站，我想你会明白我的意思：http://www.avsar.ch/tmp/html/ - eav

显示剩余3条评论

6个回答

5

请查看以下帖子获取答案：

如何在IE中使background-size生效？

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

在IE8中完美运行

- pasx

4

给你的图片加上一个名为streched（或其他名称）的类，然后在你的CSS中添加以下内容：

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

请确保将您的img标签放在<body>标记的下方。

- Krimo

我在HTML中没有图像。这是CSS属性的问题... - eav

如果您真的不想在文档中插入img标签，那么至少可以通过JavaScript动态地实现。否则，您将只得到部分浏览器支持。例如，使用jQuery，您可以这样做： $("#section1").append("<img class='stretched' src='' alt='' />"); - Krimo

是的，没错...很遗憾还有一些Internet Explorer 7用户...不管怎样，我也可以把img标签放到section1中。那不是我的问题。 :-) - eav

需要在样式中添加z-index：-10; - Avisek Chakraborty

3

我已经为此编写了一个插件： 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>

- Aram Kocharyan

1

这对我在IE7上有效

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

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

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

- MarkC80

可能可以解决问题。这个ie7-js是什么？ - eav

1

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

AlphaImageLoader

如果在IE中不支持background-size，则可能需要使您的背景图片包含两个图像。第一张图片必须以一种方式放置，以便在IE中自动正确显示，而无需定义background-size。对于所有其他浏览器，您可以使用background-size和position将第二个图像推入正确的位置。现在正在尝试这样做...

- frequent

当在body标签上设置过滤器或使用自定义字体时，过滤器的效果是不可预测的。具体情况因人而异。 - Jon Hadley

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Peter Clotworthy · Accepted Answer

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

通过在头部链接引用Modernizr来安装它。

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

并且在你的HTML标记中，

<html class="no-js">

使用CSS可以根据浏览器的支持来为页面设置样式 - 查看文档以了解支持哪些检测。在这种情况下，我们需要background-size类。

在你的CSS文件中 - 对于不支持background-size（也就是仅限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% 这样的标签可能会变得不再使用。