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

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

Answer 3

在提供的链接中查看网站，他们只将背景图片放在网站的特定部分（倒计时时间）。因此，如果您想要关注它们，可以将所需区域放在包装器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。

Css第一个div页面全高

3 个答案: