背景图像上方的白色空间

问题描述：

此背景图像上方的白色空间是由什么引起的？我可以有点解决它使用浮动的内容仍然保持不变。此外，它并没有在这个例子中显示，但如果你能告诉我如何让背景图像拉伸到适合垂直内容，将不胜感激。由于背景图像上方的白色空间

<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/

关于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;到类。

答

而且它不会在这个例子中显示，但如果你能告诉我怎么将使背景图像拉伸以适应内容垂直我们将不胜感激。

使用background-size: cover;

答

<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>

背景图像上方的白色空间

相关推荐