背景圖像上方的白色空間

-1

此背景圖像上方的白色空間是由什麼引起的？我可以有點解決它使用浮動的內容仍然保持不變。此外，它並沒有在這個例子中顯示，但如果你能告訴我如何讓背景圖像拉伸到適合垂直內容，將不勝感激。由於背景圖像上方的白色空間

<div class="welcome-section"> 
     <div class="welcome-content-wrap"> 
      <img src="images/welcomeTransparent.png"> 

      <p><span class="text-style">WELCOME</span> to Popsie's of Bramhope a modern, local<br> Yorkshire fish and chip shop. At Popsie's all our food is hand<br> prepared by Popsie's Dad in the shop's kitchen every day.</p> 
      <p>All our fish is sourced from sustainable sources.</p> 
      <p>We cook fish to order so that it isn't left to dry out under lights,<br> like in too many chip shops.</p> 
      <p>Our potatoes are from local Yorkshire & Lincolnshire farms and<br> we pride ourselves on using the best and freshest ingredients.</p> 

      <img id="image-m" src="images/shutterstock_164403170.jpg"> 
      <img id="image-l" src="images/National-federation-of-fish-logo.png"> 
      <img id="image-r" src="images/CSSMSClogo.png"> 
     </div> 
    </div> 

.welcome-section{ 
    background-image: url("https://static.pexels.com/photos/5412/water-blue-ocean.jpg"); 
    background-size: 100% 100%; 
    background-repeat: no-repeat; 
    width: 100%; 
    height: 100%; 
    display: block; 
    /*float: left;*/ 
} 

.welcome-content-wrap{ 
    margin: 0 auto; 
    width: 800px; 
    background: rgb(0, 0, 0); 
    background: rgba(0, 0, 0, 0.7); 
    text-align: center; 
} 

.welcome-content-wrap img{ 
    display: block; 
    width: 50%; 
    margin: 50px auto; 
} 

.welcome-content-wrap p{ 
    color: #fff; 
    margin: 25px; 
} 

.text-style{ 
    font-family: outstanding; 
    font-size: 0.75em; 
}

https://jsfiddle.net/kfj5ucL0/

來源

2017-03-09 Reece Barrett

關於jsfiddle的好處是你可以不斷修補它。嘗試逐個刪除所有填充和邊距，直到找到多餘空間的來源。 –

白色空間由您設定的保證金所致。

.welcome-content-wrap img{ 
    display: block; 
    width: 50%; 
    margin: 50px auto; /* <-- here */ 
}

嘗試

.welcome-content-wrap img{ 
    display: block; 
    width: 50%; 
    margin: 0px auto; 
}

伸展覆蓋垂直嘗試添加min-height: 100vh;到類。

來源

2017-03-09 12:39:29 HenryM

而且它不會在這個例子中顯示，但如果你能告訴我怎麼將使背景圖像拉伸以適應內容垂直我們將不勝感激。

使用background-size: cover;

來源

2017-03-09 12:35:47

<div class="welcome-section"> 
     <div class="welcome-content-wrap"> 
      <img src="img/anywhere.png"> 

      <p><span class="text-style">WELCOME</span> to Popsie's of Bramhope a modern, local<br> Yorkshire fish and chip shop. At Popsie's all our food is hand<br> prepared by Popsie's Dad in the shop's kitchen every day.</p> 
      <p>All our fish is sourced from sustainable sources.</p> 
      <p>We cook fish to order so that it isn't left to dry out under lights,<br> like in too many chip shops.</p> 
      <p>Our potatoes are from local Yorkshire & Lincolnshire farms and<br> we pride ourselves on using the best and freshest ingredients.</p> 
     </div> 
     <div class="welcome-content-wrap"> 
      <img id="image-m" src="images/shutterstock_164403170.jpg"> 
     </div> 
     <div class="welcome-content-wrap"> 
      <img id="image-l" src="images/National-federation-of-fish-logo.png"> 
     </div> 
     <div class="welcome-content-wrap"> 
      <img id="image-r" src="images/CSSMSClogo.png"> 
     </div> 
    </div> 
<style> 
.welcome-section{ 
    background-image: url("https://static.pexels.com/photos/5412/water-blue-ocean.jpg"); 
    background-size: 100% 555px; 
    background-repeat: no-repeat; 
    width: 100%; 
    height: 100%; 
    display: block; 
    float: left; 
} 

.welcome-content-wrap{ 
    margin: 0 auto; 
    width: 800px; 
    background: rgb(0, 0, 0); 
    background: rgba(0, 0, 0, 0.7); 
    text-align: center; 
} 

.welcome-content-wrap img{ 
    display: block; 
    width: 50%; 
    margin: 0px auto; 
    margin-bottom:10px; 
} 

.welcome-content-wrap p{ 
    color: #fff; 
} 

.text-style{ 
    font-family: outstanding; 
    font-size: 0.75em; 
} 
</style>

來源

2017-03-09 14:39:09

背景圖像上方的白色空間

回答

相關問題