1. 首頁
  2. 問答
  3. 在背景圖片下的巨大差距

在背景圖片下的巨大差距

2016-02-12 52 views
-1

爲一個朋友創建一個網站，當我添加一個圖片它只是不會去底部，我已經從字面上嘗試了一切從背景位置：左下角;填充底部：0px到其他所有內容，它只是在背景下有一個巨大的差距。我已經嘗試了多個圖像，因此它不僅僅是我的圖像。我使用的引導和低於香港專業教育學院把我的代碼加上自定義CSS代碼..在背景圖片下的巨大差距

HTML

<nav class="navbar navbar-inverse navbar-static-top"> 
<div class="container"> 
<div class="navbar-header"> 
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> 
<span class="sr-only">Toggle navigation</span> 
<span class="icon-bar"></span> 
<span class="icon-bar"></span> 
<span class="icon-bar"></span> 
</button> 
<a class="navbar-brand" style="color:white;" href="#">[site.shortname]</a> 
</div> 
<div id="navbar" class="navbar-collapse collapse"> 
<ul class="nav navbar-nav"> 
</ul> 
<ul class="nav navbar-nav navbar-right"> 
<li><a href="../navbar-fixed-top/" style="color:white;">71 users online</a></li> 
</ul> 
</div><!--/.nav-collapse --> 
</div> 
</nav> 
<div class="container theme-showcase"><br> 
<div class="col-md-8"> 
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> 
    <!-- Indicators --> 
    <ol class="carousel-indicators"> 
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> 
    <li data-target="#carousel-example-generic" data-slide-to="1"></li> 
    <li data-target="#carousel-example-generic" data-slide-to="2"></li> 
    </ol> 

    <!-- Wrapper for slides --> 
    <div class="carousel-inner"> 
    <div class="item active"> 
     <img src="http://limehotel.org/swfs/c_images/web_promos/promo_clouds.gif" style="border-radius:9px;" alt="..."> 
     <div class="carousel-caption"> 
      <h1>Lime ravamped</h1> 
      <p>Lime returns with some amazing improovements.</p> 
     </div> 
    </div> 
    <div class="item"> 
     <img src="http://limehotel.org/swfs/c_images/web_promos/2.png" style="border-radius:9px;" alt="..."> 
     <div class="carousel-caption"> 
      <h1>Hello Raven</h1> 
      <p>How are you raven?</p> 
     </div> 
    </div> 
    <div class="item"> 
     <img src="http://limehotel.org/swfs/c_images/web_promos/1.png" style="border-radius:9px;" alt="..."> 
     <div class="carousel-caption"> 
      <h1>This is cool</h1> 
      <p>Lime returns with some amazing improovements.</p> 
     </div> 
    </div> 
    </div> 

    <!-- Controls --> 
    <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"> 
    <span class="glyphicon glyphicon-chevron-left"></span> 
    </a> 
    <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"> 
    <span class="glyphicon glyphicon-chevron-right"></span> 
    </a> 
</div> <!-- Carousel --> 
</div> 
<div class="col-md-4"> 
<div class="jumbotron"> 
<h4>Sign Up</h4> 
<form name="login" action="post"> 
<input type="text" name="login_username" class="form-control spaceform" placeholder="Username..."> 
<input type="password" name="login_password" class="form-control spaceform" placeholder="Password..."> 
<input type="submit" name="login_form" class="btn btn-info spaceform" value="Sign Up"> 
<a href="" class="btn btn-warning spaceform">Sign Up</a> 
</div> 
</div> 
</div> 
<div class="container" style=""> 
<div id="footer"><br> 
<p>&copy; [site.name] 2016. All Rights Reserved.</p> 
</div> 
<p>&nbsp;</p> 
</div> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

CSS

#welcome_placeholder, .welcome_placeholder { 
    background-color: #5bc0de; 
    height:300px; 
    border-radius:6px; 
    width:699px; 
    color:white; 
    padding-top:1px; 
    padding-left:28px; 
    background-image: url('/bg_hotel.out.png'); 

} 

#news_container { 
    height: 296px; 
    width: 625px; 
    border-radius 
} 

#news_article { 
    height: 296px; 
    width: 625px; 
} 

.carousel { 
    border-radius: 5px 5px 5px 5px !important; 
    overflow: hidden !important; 
} 

.jumbotron { 
    border: 1px solid #ddd; 
    background-color: #FFF !important; 
    padding-left:20px !important; 
    padding-top:10px !important; 
    padding-right:20px !important; 
    padding-bottom:20px !important; 

} 

p { 
    font-size:14px !important; 
} 

.spaceform { 
    margin-top:8px; 
} 

.col-md-1,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9,.col-md-10,.col-md-11,.col-md-12 { 
    padding-left:0px !important; 
} 

html { 
    -webkit-text-size-adjust: 100%; 
     -ms-text-size-adjust: 100%; 
    font-family: 'Open Sans', sans-serif !important; 
} 
body { 
    background-color: #edf2f6 !important; 
    background-image:url('http://s9.tinypic.com/xckwhy_th.jpg'); 
    background-repeat: no-repeat; 
    background-position: bottom; 
} 


#welcome_placeholder, 
 
.welcome_placeholder { 
 
    background-color: #5bc0de; 
 
    height: 300px; 
 
    border-radius: 6px; 
 
    width: 699px; 
 
    color: white; 
 
    padding-top: 1px; 
 
    padding-left: 28px; 
 
    background-image: url('/bg_hotel.out.png'); 
 
} 
 
#news_container { 
 
    height: 296px; 
 
    width: 625px; 
 
    border-radius 
 
} 
 
#news_article { 
 
    height: 296px; 
 
    width: 625px; 
 
} 
 
.carousel { 
 
    border-radius: 5px 5px 5px 5px !important; 
 
    overflow: hidden !important; 
 
} 
 
.jumbotron { 
 
    border: 1px solid #ddd; 
 
    background-color: #FFF !important; 
 
    padding-left: 20px !important; 
 
    padding-top: 10px !important; 
 
    padding-right: 20px !important; 
 
    padding-bottom: 20px !important; 
 
} 
 
p { 
 
    font-size: 14px !important; 
 
} 
 
.spaceform { 
 
    margin-top: 8px; 
 
} 
 
.col-md-1, 
 
.col-md-2, 
 
.col-md-3, 
 
.col-md-4, 
 
.col-md-5, 
 
.col-md-6, 
 
.col-md-7, 
 
.col-md-8, 
 
.col-md-9, 
 
.col-md-10, 
 
.col-md-11, 
 
.col-md-12 { 
 
    padding-left: 0px !important; 
 
} 
 
html { 
 
    -webkit-text-size-adjust: 100%; 
 
    -ms-text-size-adjust: 100%; 
 
    font-family: 'Open Sans', sans-serif !important; 
 
} 
 
body { 
 
    background-color: #edf2f6 !important; 
 
    background-image: url('http://s9.tinypic.com/xckwhy_th.jpg'); 
 
    background-repeat: no-repeat; 
 
    background-position: bottom; 
 
}
<nav class="navbar navbar-inverse navbar-static-top"> 
 
    <div class="container"> 
 
    <div class="navbar-header"> 
 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> 
 
     <span class="sr-only">Toggle navigation</span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     </button> 
 
     <a class="navbar-brand" style="color:white;" href="#">[site.shortname]</a> 
 
    </div> 
 
    <div id="navbar" class="navbar-collapse collapse"> 
 
     <ul class="nav navbar-nav"> 
 
     </ul> 
 
     <ul class="nav navbar-nav navbar-right"> 
 
     <li><a href="../navbar-fixed-top/" style="color:white;">71 users online</a> 
 
     </li> 
 
     </ul> 
 
    </div> 
 
    <!--/.nav-collapse --> 
 
    </div> 
 
</nav> 
 
<div class="container theme-showcase"> 
 
    <br> 
 
    <div class="col-md-8"> 
 
    <div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> 
 
     <!-- Indicators --> 
 
     <ol class="carousel-indicators"> 
 
     <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> 
 
     <li data-target="#carousel-example-generic" data-slide-to="1"></li> 
 
     <li data-target="#carousel-example-generic" data-slide-to="2"></li> 
 
     </ol> 
 

 
     <!-- Wrapper for slides --> 
 
     <div class="carousel-inner"> 
 
     <div class="item active"> 
 
      <img src="http://limehotel.org/swfs/c_images/web_promos/promo_clouds.gif" style="border-radius:9px;" alt="..."> 
 
      <div class="carousel-caption"> 
 
      <h1>Lime ravamped</h1> 
 
      <p>Lime returns with some amazing improovements.</p> 
 
      </div> 
 
     </div> 
 
     <div class="item"> 
 
      <img src="http://limehotel.org/swfs/c_images/web_promos/2.png" style="border-radius:9px;" alt="..."> 
 
      <div class="carousel-caption"> 
 
      <h1>Hello Raven</h1> 
 
      <p>How are you raven?</p> 
 
      </div> 
 
     </div> 
 
     <div class="item"> 
 
      <img src="http://limehotel.org/swfs/c_images/web_promos/1.png" style="border-radius:9px;" alt="..."> 
 
      <div class="carousel-caption"> 
 
      <h1>This is cool</h1> 
 
      <p>Lime returns with some amazing improovements.</p> 
 
      </div> 
 
     </div> 
 
     </div> 
 

 
     <!-- Controls --> 
 
     <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"> 
 
     <span class="glyphicon glyphicon-chevron-left"></span> 
 
     </a> 
 
     <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"> 
 
     <span class="glyphicon glyphicon-chevron-right"></span> 
 
     </a> 
 
    </div> 
 
    <!-- Carousel --> 
 
    </div> 
 
    <div class="col-md-4"> 
 
    <div class="jumbotron"> 
 
     <h4>Sign Up</h4> 
 
     <form name="login" action="post"> 
 
     <input type="text" name="login_username" class="form-control spaceform" placeholder="Username..."> 
 
     <input type="password" name="login_password" class="form-control spaceform" placeholder="Password..."> 
 
     <input type="submit" name="login_form" class="btn btn-info spaceform" value="Sign Up"> 
 
     <a href="" class="btn btn-warning spaceform">Sign Up</a> 
 
    </div> 
 
    </div> 
 
</div> 
 
<div class="container" style=""> 
 
    <div id="footer"> 
 
    <br> 
 
    <p>&copy; [site.name] 2016. All Rights Reserved.</p> 
 
    </div> 
 
    <p>&nbsp;</p> 
 
</div>

來源

2016-02-12 Joe Dash

+0

請出示工作的例子，顯示您的問題。 –

+0

我只有。只需將代碼放入js小提琴中，然後我們就可以開始了。 –

+0

我沒有看到任何差距。 https://jsfiddle.net/kmsebw0n/ – ketan

回答

1

對齊圖像身體的底部。它是什麼。身體結束在圖像完成的地方。如果你使頁腳的div更大，你會看到圖像進入底部（div的底部）。

<body>包含所有的內容，所以圖像在內容的末尾而非瀏覽器窗口的底部。如果您希望圖片始終處於瀏覽器窗口的底部，則無論如何您都應該使用position：absolute;底部：0;

如何加入這個身體：

height:100vh;

在這裏看到：https://jsfiddle.net/1zq13grk/

來源

2016-02-12 12:06:51

+0

我增加了position：absolute;身體標記，但仍然有差距 –

+0

如果我做你的編輯，上述巨大的差距和形象是沒有在哪裏可以看到。 –

+0

上面只是我編輯的答案。那是你要的嗎？ –

相關問題

 相關問題