Question

我一直试图在Highcharts标记中获得全屏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;
}

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>

Bootstrap全屏标题

1 个答案: