Question

此背景图片上方的空白区域是什么？我可以通过内部的内容仍然按住使用浮动来修复它。此外，它没有显示在这个例子中，但如果你可以告诉我如何使背景图像拉伸以垂直适合内容，我们将不胜感激。感谢

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

Answer 1

空白区域是由您设置的边距引起的。

.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;添加到班级。

Answer 2

此示例中也没有显示，但如果您可以告诉我如何使背景图像拉伸以垂直适合内容，那么我们将不胜感激。

使用background-size: cover;

Answer 3

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

在后面地面图象上的白色空间

3 个答案: