首页自适应背景图，不用 js 实现高度为浏览器可见高度？

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

V2EX 提问指南

这是一个创建于 3623 天前的主题，其中的信息可能已经有所发展或是发生改变。

载入的首页大图正好height是浏览器的高，看了下代码感觉不是js算出来的，用css怎么实现？
例子： https://bitcoinfoundation.org/

首页

载入

浏览器

14 条回复 • 2014-12-17 18:23:11 +08:00

wolfan

2014-12-16 20:29:16 +08:00 via Android

min-height:100%
么？

ihuguowei

2014-12-16 20:31:58 +08:00

background-size:cover

JoyNeop

2014-12-16 20:34:12 +08:00

http://snook.ca/archives/html_and_css/vm-vh-units

lemonda

2014-12-16 20:35:15 +08:00

.home .site-header .bg-image {
background-image: url("../img/bitcoin-bg-1.jpg");
background-position: center center;
background-size: cover;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
z-index: 1;
}

txlty

2014-12-16 20:43:43 +08:00

测试的姿势不对。
把JS禁用，再看，效果没了。

pandada8

2014-12-16 20:56:09 +08:00 via Android

height:100vh

linking

2014-12-16 21:11:46 +08:00

@txlty you're right

lvwzhen

2014-12-16 21:19:13 +08:00

100vh 才是对的

Slienc7

2014-12-16 22:09:51 +08:00

body {
margin:0;
padding:0;
background: #000 url('imgs.jpg') center center fixed no-repeat;
-moz-background-size: cover;
background-size: cover;
}

ooh

2014-12-17 00:50:21 +08:00

body {
background: url(../img/bg.png) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

Grenadn

2014-12-17 09:22:31 +08:00 via Android

需要把html元素和body元素设为height:100%，然后给body加上background，把它的background-size设为cover，over

kmvan

2014-12-17 10:44:53 +08:00

这网站。。。居然是“沉浸式”顶栏。。。

fyh1807008

2014-12-17 18:23:11 +08:00

正解 @JoyNeop
vh赞