HTML/CSS:如何在 header 下方显示 100% 宽度和 100% 高度的背景图片
HTML/CSS: How to show a background picture that has 100% width and 100% height below a header
我想在 header 下面放一张背景图片。图片应该覆盖所有的宽度和高度,但不应该覆盖header。但是,背景图片不显示。我的代码有什么问题??感谢您抽出宝贵时间我的代码如下;
下面是我的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;
}
您需要定义 body
元素的高度。 wrapper
class 没有 space 可查看。 height:100%;
在具有 height:0px;
的父 body
元素中看不到,如果未定义,这是默认值。
我想在 header 下面放一张背景图片。图片应该覆盖所有的宽度和高度,但不应该覆盖header。但是,背景图片不显示。我的代码有什么问题??感谢您抽出宝贵时间我的代码如下;
下面是我的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;
}
您需要定义 body
元素的高度。 wrapper
class 没有 space 可查看。 height:100%;
在具有 height:0px;
的父 body
元素中看不到,如果未定义,这是默认值。