Question

我试图在标题下面放一张背景图片。图片应该覆盖所有的宽度和高度，但不应覆盖标题。但是，背景图片没有显示出来。我的代码有什么问题？感谢您抽出宝贵时间我的代码如下;

我html的一部分在下面;

<body>

<header>
  <p class="btn1"><img src="images/thumb2.jpg" class="skypic" alt="skypic"><span class="stext">picA</span></p>
  <p class="btn2"><span class="king"><img src="images/king.png"></span><a href="xxx.php"><img src="images/B.jpg"></a></p>
</header>

<div id="wrapper" class="stampwrap">

</div>
</body>

我css的一部分在下面;

body{
  font: 14px/1.6 sans-serif;
  color:#313131;
  background: #67b2e4;
}

header{
  display: block;
  overflow: hidden;
  height: 80px;
  background: #67b2e4;
  padding: 2% 4%;
}

.btn1{
  float:left;
}

.btn1 .stext {
  font-size: 2rem;
  font-weight: bold;
  padding-left: 20px;
  float:right;
  margin-top: 20px;
}

.btn2{
  float: right;
}

.skypic{
  height: 80px;
  width: auto;
}

#wrapper{
  height: 100%;
  width:100%;
  background: url(images/zzz.jpg);
}

.stampwrap{
  position: relative;
}

Answer 1

您需要定义body元素的高度。 wrapper类没有空间可供查看。在height:100%;的父body元素中无法看到height:0px;，如果未定义，则为默认值。

HTML / CSS：如何显示标题

1 个答案: