Bootstrap全屏标题

Question

我一直在尝试background在header标签中获得全屏但由于某种原因它没有显示？

码

header {
  position: relative;
  width: 100%;
  min-height: auto;
  text-align: center;
  color: #fff;
  background-image: url(../img/header.jpg);
  background-position: center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  -o-background-size: cover;
}

<header></header>

Answer 1

你缺少height:100%的header,但即便如此,它不会显示,因为这的孩子body和html你需要给height:100%和width:100%家长(body/html)

body,
html {
  height: 100%;
  width: 100%;
  margin: 0;
}
header {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  color: #fff;
  background: url(//placehold.it/500) center / cover;
}

<header></header>

另一种方法是使用 100vh

body{
  margin: 0;
}
header {
  position: relative;
  width: 100%;
  height: 100vh;
  text-align: center;
  color: #fff;
  background: url(//placehold.it/500) center / cover;
}

<header></header>