html - CSS背景图片和高度

Question

我有这个代码:

.main {
  min-height:100%;
  width:100%;
  position: relative;
  background-image: url('onepage_restaurant.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  display: block;
}

但是 .main 类的 div 没有出现。为什么？

Answer 1

您的代码可以正常工作，除非您确保父元素的高度大于零 - 否则您的 .main 元素也将没有高度。

还要确保图像的文件路径是正确的。您可以使用浏览器的开发者工具来检查容器的高度和图片 url。

html, body {
  width: 100%;
  height: 100%;
}
.main {
  min-height: 100%;
  width: 100%;
  position: relative;
  background-image: url(//placehold.it/500);
  background-repeat: no-repeat;
  background-size: cover;
  display: block;
}

<div class="main"></div>