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

eav*_*eav 16 css internet-explorer internet-explorer-7

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

我搜索了一些解决方案的网络,但我所拥有的唯一的事情是,我应该把imgwidth: 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>
Run Code Online (Sandbox Code Playgroud)

Sac*_*ull 11

使用Modernizr,您可以发现用户的浏览器的功能.

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

<script src="http://www.modernizr.com/downloads/modernizr-latest.js"></script>
Run Code Online (Sandbox Code Playgroud)

在HTML标记中,

<html class="no-js">
Run Code Online (Sandbox Code Playgroud)

使用CSS,您可以在浏览器支持页面时设置样式 - 请检查文档以了解支持的检测.在这种情况下,我们想要这个background-size课程

在你的CSS文件中 - 对于没有背景大小的浏览器(AKA只是IE)

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

这适用于以下浏览器:

.background-size #image{
background-image: url(lol.png);
background-size: cover;
}
Run Code Online (Sandbox Code Playgroud)

使用此方法更符合标准,因为将来的标签min-height: 100%可能会变得未使用.


pas*_*asx 5

查看这篇文章的答案:

如何在IE中制作背景大小的工作?

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

在IE8中完美运行


Kri*_*imo 4

给你的图像一个 streched 类(或其他任何东西),并在你的 css 中添加以下内容:

img.stretched {
 min-height: 100%;
 min-width: 1024px;
 width: 100%;
 height: auto;
 position: fixed;
 top: 0;
 left: 0;
}
Run Code Online (Sandbox Code Playgroud)

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