css - CSS第一个div页面全高

Question

如何使用像这个网站这样的背景图片使单页网站的第一页全高？http://avathemes.com/HTML5/De7igner/image.php

Answer 1

为什么不使用 vh 单位？

vw 和 vh 单位代表实际视口的宽度和高度的百分比。根据以下规则，它们可以取 0 到 100 之间的值：

100vw = 100% 的视口宽度 1vw = 1% 的视口宽度

100vh = 视口高度的 100% 1vh = 视口高度的 1%

.class_name
{
    height: 100vh;
}

Answer 2

查看提供的链接中的网站，他们只将背景图片放在网站的特定部分（倒计时时间）。所以如果你想跟着他们，你可以把需要的区域放在一个包装器div中，然后使用css3背景属性。

.wrapper {
    width: 100%;
    height: 100%;
    background-image: url(bg.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    -webkit-background-size: cover;
    background-size: cover;
    background-attachment: fixed;
}

如果您希望整个页面都有背景，那么您只需将.wrapper选择器更改为body.

Answer 3

我正在使用background-size本文http://css-tricks.com/perfect-full-page-background-image/中介绍的属性，请查看。这是你想要的 js fiddle http://jsfiddle.net/Br4fZ/ 。