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>

Answer 2

您想将该元素的min-height设置为100%。如果要设置具有百分比的元素的height，则需要将父元素的height设置为特定值。

Answer 3

以像素为单位设置高度。实施例。

height: 100px;

Answer 4

可能是背景图片错误的路径，或者，如果你没有内容，html，身高设置为零。在你的CSS中尝试这个

send string: "s[Hello World]"
send integer: "i[97]"
send float: 'f[14.25]"
send date: "d[2016-11-02]" 
...
...

CSS背景图像和高度

4 个答案: