Question

所以，我试图将图像粘贴到页面底部，位置为：fixed（有点像导航栏）。问题是我在页面中心的某个地方有文字，当我缩放时，这个图像覆盖了一些文字并且无法看到。

CSS：

.bottom {
    display: block;
    position:fixed;
    width:100%;
    height: 70px;
    bottom: 0px;
}

p.BrunchENG_TXT{
    padding-top: 20px;
    text-align: justify;
    margin: 0 auto;
    width: 60%;
    color:#7b0d4c;
    font-family:"Verdana";
}

HTML：

<div>
 <p class="BrunchENG_TXT"> 
  <b>Brunch</b> 
  </br>
  The weekends are holydays, giving us the chance to share special moments with the people we love the most….We welcome everybody each Sunday starting 11 o’clock so that all of you can enjoy fully this precious time and recharge with healthy food and energy for the day….Welcome to the Sunday Bruch @ Mumbai Burgas - the menus are composed with special attention to the children and the vegetarians and are published well in advance on our FB page.
 </p> 

 <div>
  <img src="images/repetB.jpg" class="bottom">
 </div>
</div>

Answer 1

我使用fakeAsync并且它有效！

Answer 2

试试这段代码对我有用

CSS：

 .bottom {
 display: block;
 position:fixed;
 width:100%;
 height: 70px;
 bottom: 0px;
 }

  p.BrunchENG_TXT{
  padding-top: 20px;
  text-align: justify;
  margin: 0 auto;
  width: 60%;
  color:#7b0d4c;
  font-family:"Verdana";
  }

  #img-footer{
    height: 100px; /* change 100px by height of the picture "repetB.jpg"*/
  }

HTML：

<div>
 <p class="BrunchENG_TXT"> <b>Brunch</b> </br>
 The weekends are holydays, giving us the chance to share special moments with the people we love the most….We welcome everybody each Sunday starting 11 o’clock so that all of you can enjoy fully this precious time and recharge with healthy food and energy for the day….Welcome to the Sunday Bruch @ Mumbai Burgas - the menus are composed with special attention to the children and the vegetarians and are published well in advance on our FB page.
 </p> 

<div id="img-footer">
<img src="images/repetB.jpg" class="bottom">
</div>
</div>

位置：固定Div封面图像

2 个答案: