使背景图像 100% 的视口

Question

我正在寻找一种解决方案，使我的打开背景图像成为视口的 100%，在使用 Josh powel 的答案Page height to 100% of viewport? 之后，它可以在 mac 上的 chrome 上运行，但不能在任何其他浏览器上运行（在 mac 上或 windows）当我说“它适用于 mac 上的 chrome”时，它在大多数情况下都适用，但是如果我将浏览器拉伸得太高，它不适合覆盖，我会看到我的下一点内容，所以它就像它只适用高度可达 x...

这是我的代码：

<section class="intro">
<div class="intro-body">
</div>
</section>




.intro {
display: table;
width: 100%;
height: 100%;
padding: 350px 0 330px;
text-align: center;
color: #fff;
position: relative;
background: url(http://www.wallsave.com/wallpapers/1920x1200/plain-blue-gradient/2567400/plain-blue-gradient-pc-mac-hd-2567400.jpg) no-repeat center;
background-size:cover;
}




.intro-page {
padding: 150px 0 130px;
background: url(http://www.wallsave.com/wallpapers/1920x1200/plain-blue-gradient/2567400/plain-blue-gradient-pc-mac-hd-2567400.jpg) no-repeat center;
background-size: cover;
}

function windowH() {
var wH = $(window).height();

$('.intro, .intro-page').css({height: wH});
}

在这里拉小提琴http://jsfiddle.net/9h98f/1/

如果有人能提供任何启示，那就太好了。

Answer 1

为了使元素达到页面的 100% 高度，您还必须具备：

html,body { height: 100%; min-height: 100%; }

在 CSS 中执行此操作比使用 JS 更好、更可靠。

或者，您可以将背景图像放在正文上（使用 background-size: cover，就像您正在使用的那样）。