正如您所知，我试图在背景图像下面连续创建一个图像页脚，但我并不完全确定最佳方式是什么。当我尝试将页脚放在底部时，它会在<h>元素上方结束。由于图像的宽度，我的行也是两个原因？
.navbar-nav>li {
float: none;
}
.navbar-default {
background-color: rgba(255, 255, 255, 0);
border-width: 0px;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
background-color: rgba(150, 155, 155, );
}
.navbar {
margin-bottom: 0 !important;
}
.list {
font-family: 'Open Sans Condensed', sans-serif;
font-weight: bolder;
}
.synopsis {
color:white;
text-align: center;
}
.teampics .row {
margin-top: 17%;
text-align:center;
}<!DOCTYPE html>
<html>
<head>
<meta content="width=device-width, initial-scale=1" name="viewport">
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">
</script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js">
</script>
<link href="Calums2.css" rel="stylesheet">
<link href='https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300' rel='stylesheet' type='text/css'>
</head>
<body>
<div class="person">
<img height="100%" src="http://i.imgur.com/pE2NrKh.jpg" style="position: absolute; top: 0; left: 0;" width="100%">
</div>
<div class="list" style="Position: absolute; top: 0px; left:0px;">
<div class="navbar navbar-default">
<nav class="navbar navbar-default">
<ul class="nav nav-justified navbar-nav">
<li><a href="Home.html"><h2>Home</h2></a></li>
<li><a href="team.html"><h2>Team</h2></a></li>
<li><a href="kyrgyzstan.html"><h2>Kyrgyzstan</h2></a></li>
<li><a href="Blog.html"><h2>Blog</h2></a></li>
<li><a href="Expeditions.html"><h2>Expeditions</h2></a></li>
</ul>
</div>
</nav>
<style>
text-align:justify;
</style>
</div>
</div>
<div class="col-sm-4" style="position: absolute;bottom: 0px; left: 0px;">
<div class="synopsis">
<h3>Barrett's Privateers</h3>
<h5>We are a group of old school friends (plus a few others who tag along) who go on expeditions and good trips. We have over a thousand nights under canvas between us, and there are more in the pipeline. We have done trips on foot, by car, on water in the boat we built, by bicycle and even in a wooden burger cart. So far our outings have taken us across Europe, Asia and Africa.</h5>
</div
</div>
</div>
<div class="sponsorfooter" style="position: absolute;bottom: 0px; left: 0px;">
<div class="col-sm-1"><img src=https://static.wixstatic.com/media/83f988_1eab1592deae4a06927c22dd9435c1d6.jpg/v1/fill/w_196,h_90,al_c,q_75,usm_0.50_1.20_0.00/83f988_1eab1592deae4a06927c22dd9435c1d6.jpg></div>
<div class="col-sm-1"><img src=https://static.wixstatic.com/media/83f988_a874687813fefff04482e59d0a287e96.jpg/v1/fill/w_176,h_82,al_c,q_75,usm_0.50_1.20_0.00/83f988_a874687813fefff04482e59d0a287e96.jpg></div>
<div class="col-sm-1"><img src=https://static.wixstatic.com/media/83f988_e495c4e400db4cfca085bf8540069272.jpg/v1/fill/w_120,h_120,al_c,q_75,usm_0.50_1.20_0.00/83f988_e495c4e400db4cfca085bf8540069272.jpg></div>
<div class="col-sm-1"><img src= https://static.wixstatic.com/media/83f988_60ec121fab6a43ef81217b60b0c805f5.jpg/v1/fill/w_178,h_90,al_c,q_75,usm_0.50_1.20_0.00/83f988_60ec121fab6a43ef81217b60b0c805f5.jpg></div>
<div class="col-sm-1"><img src=https://static.wixstatic.com/media/83f988_049efbb23a743e7cc054b9b4b298232b.png/v1/fill/w_160,h_176,al_c,usm_0.50_1.20_0.00/83f988_049efbb23a743e7cc054b9b4b298232b.png></div>
<div class="col-sm-1"><img src=https://static.wixstatic.com/media/83f988_f3ee99e41d67a3553c962074edb27d8c.jpg/v1/fill/w_296,h_68,al_c,q_75,usm_0.50_1.20_0.00/83f988_f3ee99e41d67a3553c962074edb27d8c.jpg></div>
<div class="col-sm-1"><img src=https://static.wixstatic.com/media/83f988_4803fc6cbb10000fe9ca77e29aa326cd.jpg/v1/fill/w_158,h_72,al_c,q_75,usm_0.50_1.20_0.00/83f988_4803fc6cbb10000fe9ca77e29aa326cd.jpg></div>
<div class="col-sm-1"><img src= https://static.wixstatic.com/media/83f988_8ef8a89d17e4b23cf08a78fe76c12950.jpg/v1/fill/w_168,h_78,al_c,q_75,usm_0.50_1.20_0.00/83f988_8ef8a89d17e4b23cf08a78fe76c12950.jpg</div>
<div class="col-sm-1"><img src= https://static.wixstatic.com/media/83f988_8ef8a89d17e4b23cf08a78fe76c12950.jpg/v1/fill/w_168,h_78,al_c,q_75,usm_0.50_1.20_0.00/83f988_8ef8a89d17e4b23cf08a78fe76c12950.jpg></div>
<div class="col-sm-1"><img src=https://static.wixstatic.com/media/83f988_14c382ea18bfee9aace258f8442f6af1.png/v1/fill/w_256,h_120,al_c,usm_0.50_1.20_0.00/83f988_14c382ea18bfee9aace258f8442f6af1.png></div>
<div class="col-sm-1"><img src= https://static.wixstatic.com/media/83f988_ddf046663ed7bcd9a804c6baa00bde75.jpg/v1/fill/w_280,h_72,al_c,q_75,usm_0.50_1.20_0.00/83f988_ddf046663ed7bcd9a804c6baa00bde75.jpg></div>
<div class="col-sm-1"><img src=https://static.wixstatic.com/media/83f988_64852a4616aa432092e85b3cef276674.jpg/v1/fill/w_164,h_98,al_c,q_75,usm_0.50_1.20_0.00/83f988_64852a4616aa432092e85b3cef276674.jpg></div>
<div class="col-sm-1"><img src=https://static.wixstatic.com/media/83f988_19fb52bb10e03c36338f2c2f61f8092d.jpg/v1/fill/w_158,h_74,al_c,q_75,usm_0.50_1.20_0.00/83f988_19fb52bb10e03c36338f2c2f61f8092d.jpg></div>
</div>
</body>
</html>
答案 0 :(得分：2)
您的代码中有几个额外的DIV，以及一个未正确关闭的DIV。
请尝试使用此HTML：
<div class="person">
<img height="100%" src="http://i.imgur.com/pE2NrKh.jpg" style="position: absolute; top: 0; left: 0;" width="100%">
</div>
<div class="list" style="Position: absolute; top: 0px; left:0px;">
<div class="navbar navbar-default">
<nav class="navbar navbar-default">
<ul class="nav nav-justified navbar-nav">
<li><a href="Home.html"><h2>Home</h2></a></li>
<li><a href="team.html"><h2>Team</h2></a></li>
<li><a href="kyrgyzstan.html"><h2>Kyrgyzstan</h2></a></li>
<li><a href="Blog.html"><h2>Blog</h2></a></li>
<li><a href="Expeditions.html"><h2>Expeditions</h2></a></li>
</ul>
</nav>
</div>
<style>
text-align:justify;
</style>
</div>
<div class="col-sm-4" style="position: absolute;bottom: 0px; left: 0px;">
<div class="synopsis">
<h3>Barrett's Privateers</h3>
<h5>We are a group of old school friends (plus a few others who tag along) who go on expeditions and good trips. We have over a thousand nights under canvas between us, and there are more in the pipeline. We have done trips on foot, by car, on water in the boat we built, by bicycle and even in a wooden burger cart. So far our outings have taken us across Europe, Asia and Africa.</h5>
</div>
</div>
<div class="sponsorfooter" style="position: absolute;bottom: 0px; left: 0px;">
<div class="col-sm-1"><img src=https://static.wixstatic.com/media/83f988_1eab1592deae4a06927c22dd9435c1d6.jpg/v1/fill/w_196,h_90,al_c,q_75,usm_0.50_1.20_0.00/83f988_1eab1592deae4a06927c22dd9435c1d6.jpg></div>
<div class="col-sm-1"><img src=https://static.wixstatic.com/media/83f988_a874687813fefff04482e59d0a287e96.jpg/v1/fill/w_176,h_82,al_c,q_75,usm_0.50_1.20_0.00/83f988_a874687813fefff04482e59d0a287e96.jpg></div>
<div class="col-sm-1"><img src=https://static.wixstatic.com/media/83f988_e495c4e400db4cfca085bf8540069272.jpg/v1/fill/w_120,h_120,al_c,q_75,usm_0.50_1.20_0.00/83f988_e495c4e400db4cfca085bf8540069272.jpg></div>
<div class="col-sm-1"><img src= https://static.wixstatic.com/media/83f988_60ec121fab6a43ef81217b60b0c805f5.jpg/v1/fill/w_178,h_90,al_c,q_75,usm_0.50_1.20_0.00/83f988_60ec121fab6a43ef81217b60b0c805f5.jpg></div>
<div class="col-sm-1"><img src=https://static.wixstatic.com/media/83f988_049efbb23a743e7cc054b9b4b298232b.png/v1/fill/w_160,h_176,al_c,usm_0.50_1.20_0.00/83f988_049efbb23a743e7cc054b9b4b298232b.png></div>
<div class="col-sm-1"><img src=https://static.wixstatic.com/media/83f988_f3ee99e41d67a3553c962074edb27d8c.jpg/v1/fill/w_296,h_68,al_c,q_75,usm_0.50_1.20_0.00/83f988_f3ee99e41d67a3553c962074edb27d8c.jpg></div>
<div class="col-sm-1"><img src=https://static.wixstatic.com/media/83f988_4803fc6cbb10000fe9ca77e29aa326cd.jpg/v1/fill/w_158,h_72,al_c,q_75,usm_0.50_1.20_0.00/83f988_4803fc6cbb10000fe9ca77e29aa326cd.jpg></div>
<div class="col-sm-1"><img src= https://static.wixstatic.com/media/83f988_8ef8a89d17e4b23cf08a78fe76c12950.jpg/v1/fill/w_168,h_78,al_c,q_75,usm_0.50_1.20_0.00/83f988_8ef8a89d17e4b23cf08a78fe76c12950.jpg</div>
<div class="col-sm-1"><img src= https://static.wixstatic.com/media/83f988_8ef8a89d17e4b23cf08a78fe76c12950.jpg/v1/fill/w_168,h_78,al_c,q_75,usm_0.50_1.20_0.00/83f988_8ef8a89d17e4b23cf08a78fe76c12950.jpg></div>
<div class="col-sm-1"><img src=https://static.wixstatic.com/media/83f988_14c382ea18bfee9aace258f8442f6af1.png/v1/fill/w_256,h_120,al_c,usm_0.50_1.20_0.00/83f988_14c382ea18bfee9aace258f8442f6af1.png></div>
<div class="col-sm-1"><img src= https://static.wixstatic.com/media/83f988_ddf046663ed7bcd9a804c6baa00bde75.jpg/v1/fill/w_280,h_72,al_c,q_75,usm_0.50_1.20_0.00/83f988_ddf046663ed7bcd9a804c6baa00bde75.jpg></div>
<div class="col-sm-1"><img src=https://static.wixstatic.com/media/83f988_64852a4616aa432092e85b3cef276674.jpg/v1/fill/w_164,h_98,al_c,q_75,usm_0.50_1.20_0.00/83f988_64852a4616aa432092e85b3cef276674.jpg></div>
<div class="col-sm-1"><img src=https://static.wixstatic.com/media/83f988_19fb52bb10e03c36338f2c2f61f8092d.jpg/v1/fill/w_158,h_74,al_c,q_75,usm_0.50_1.20_0.00/83f988_19fb52bb10e03c36338f2c2f61f8092d.jpg></div>
</div>
答案 1 :(得分：0)
这是因为您将背景图片的高度设为100％。降低身高。
答案 2 :(得分：0)
可能你想要这样的东西......你的代码有很多错误，包括未关闭的div ..还需要使用img-responsive类响应徽标图像，以便很好地适应...接下来我添加了一个＆＃39; textover＆＃39; div用于在图像上显示文本并将图像作为另一个div的背景图像，称为content..here我给了min-width:848px内容，因为它是背景图像的宽度
<!DOCTYPE html>
<html>
<head>
<meta content="width=device-width, initial-scale=1" name="viewport">
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">
</script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js">
</script>
<link href="Calums2.css" rel="stylesheet">
<link href='https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300' rel='stylesheet' type='text/css'>
<style>
.navbar-nav>li {
float: none;
}
.navbar-default {
background-color: rgba(255, 255, 255, 0);
border-width: 0px;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
background-color: rgba(150, 155, 155, );
}
.navbar {
margin-bottom: 0 !important;
}
.list {
font-family: 'Open Sans Condensed', sans-serif;
font-weight: bolder;
}
.synopsis {
color:white;
text-align: center;
}
.teampics .row {
margin-top: 17%;
text-align:center;
}
.content
{
background-image:url("http://i.imgur.com/pE2NrKh.jpg");
background-repeat:no-repeat;
}
</style>
</head>
<body >
<div class="content" style="position:relative;top:0px;min-height:848px;" >
<div class="textover" style="position:absolute;top:0px;" >
<div class="list" >
<div class="navbar navbar-default" >
<nav class="navbar navbar-default">
<ul class="nav nav-justified navbar-nav">
<li><a href="Home.html"><h2>Home</h2></a></li>
<li><a href="team.html"><h2>Team</h2></a></li>
<li><a href="kyrgyzstan.html"><h2>Kyrgyzstan</h2></a></li>
<li><a href="Blog.html"><h2>Blog</h2></a></li>
<li><a href="Expeditions.html"><h2>Expeditions</h2></a></li>
</ul>
</div>
</nav>
</div>
<div class="rows" >
<div class="col-sm-12" >
<div class="synopsis">
<h3>Barrett's Privateers</h3>
<h5>We are a group of old school friends (plus a few others who tag along) who go on expeditions and good trips. We have over a thousand nights under canvas between us, and there are more in the pipeline. We have done trips on foot, by car, on water in the boat we built, by bicycle and even in a wooden burger cart. So far our outings have taken us across Europe, Asia and Africa.</h5>
</div>
</div>
</div>
</div>
</div>
<div class="sponsorfooter" style="position:relative;top:0px;margin-top:5px;">
<div class="rows" >
<div class="col-sm-1 " ><img src="https://static.wixstatic.com/media/83f988_1eab1592deae4a06927c22dd9435c1d6.jpg/v1/fill/w_196,h_90,al_c,q_75,usm_0.50_1.20_0.00/83f988_1eab1592deae4a06927c22dd9435c1d6.jpg" class="img-responsive"/></div>
<div class="col-sm-1 "><img src="https://static.wixstatic.com/media/83f988_a874687813fefff04482e59d0a287e96.jpg/v1/fill/w_176,h_82,al_c,q_75,usm_0.50_1.20_0.00/83f988_a874687813fefff04482e59d0a287e96.jpg" class="img-responsive"/></div>
<div class="col-sm-1 "><img src="https://static.wixstatic.com/media/83f988_e495c4e400db4cfca085bf8540069272.jpg/v1/fill/w_120,h_120,al_c,q_75,usm_0.50_1.20_0.00/83f988_e495c4e400db4cfca085bf8540069272.jpg" class="img-responsive"/></div>
<div class="col-sm-1 "><img src="https://static.wixstatic.com/media/83f988_60ec121fab6a43ef81217b60b0c805f5.jpg/v1/fill/w_178,h_90,al_c,q_75,usm_0.50_1.20_0.00/83f988_60ec121fab6a43ef81217b60b0c805f5.jpg" class="img-responsive"/></div>
<div class="col-sm-1 "><img src="https://static.wixstatic.com/media/83f988_049efbb23a743e7cc054b9b4b298232b.png/v1/fill/w_160,h_176,al_c,usm_0.50_1.20_0.00/83f988_049efbb23a743e7cc054b9b4b298232b.png" class="img-responsive"/></div>
<div class="col-sm-1 "><img src="https://static.wixstatic.com/media/83f988_f3ee99e41d67a3553c962074edb27d8c.jpg/v1/fill/w_296,h_68,al_c,q_75,usm_0.50_1.20_0.00/83f988_f3ee99e41d67a3553c962074edb27d8c.jpg" class="img-responsive"/></div>
<div class="col-sm-1 "><img src="https://static.wixstatic.com/media/83f988_4803fc6cbb10000fe9ca77e29aa326cd.jpg/v1/fill/w_158,h_72,al_c,q_75,usm_0.50_1.20_0.00/83f988_4803fc6cbb10000fe9ca77e29aa326cd.jpg" class="img-responsive"/></div>
<div class="col-sm-1 "><img src="https://static.wixstatic.com/media/83f988_8ef8a89d17e4b23cf08a78fe76c12950.jpg/v1/fill/w_168,h_78,al_c,q_75,usm_0.50_1.20_0.00/83f988_8ef8a89d17e4b23cf08a78fe76c12950.jpg"class="img-responsive"/></div>
<div class="col-sm-1 "><img src="https://static.wixstatic.com/media/83f988_14c382ea18bfee9aace258f8442f6af1.png/v1/fill/w_256,h_120,al_c,usm_0.50_1.20_0.00/83f988_14c382ea18bfee9aace258f8442f6af1.png" class="img-responsive"/></div>
<div class="col-sm-1 "><img src="https://static.wixstatic.com/media/83f988_ddf046663ed7bcd9a804c6baa00bde75.jpg/v1/fill/w_280,h_72,al_c,q_75,usm_0.50_1.20_0.00/83f988_ddf046663ed7bcd9a804c6baa00bde75.jpg" class="img-responsive"/></div>
<div class="col-sm-1 "><img src="https://static.wixstatic.com/media/83f988_64852a4616aa432092e85b3cef276674.jpg/v1/fill/w_164,h_98,al_c,q_75,usm_0.50_1.20_0.00/83f988_64852a4616aa432092e85b3cef276674.jpg" class="img-responsive"/></div>
<div class="col-sm-1 "><img src="https://static.wixstatic.com/media/83f988_19fb52bb10e03c36338f2c2f61f8092d.jpg/v1/fill/w_158,h_74,al_c,q_75,usm_0.50_1.20_0.00/83f988_19fb52bb10e03c36338f2c2f61f8092d.jpg" class="img-responsive"/></div>
</div>
</div>
</body>
</html>