html - 使用背景 : Cover 截断图像

Question

我正在尝试获取背景图像以在当前导航下显示图像的顶部。但是我不知道我在这里做错了什么。

HTML:

<section class="jumbotron">
    <div class="container">
        <br>.<br><br>.<br><br>.<br><br>.<br><br>.<br><br>.<br><br>.<br><br>.
    </div>
</section> 

CSS:

.jumbotron {
    background: url("../img/bg.jpg") no-repeat bottom #b1b0b6;
    padding: 10% 2%; 
    margin-top: 5%;
    background-size: cover;
    text-align: center;
    color: white;
    position: relative;
    overflow: hidden;
}

使用这些当前设置，它显示:

但完整的图像是这样的:

我的实时预览在这里:

http://podpanel.pw/

我已经用尽了所有选项。这可能修复吗？

Answer 1

如果您想在导航下显示图像的顶部，请尝试添加此 CSS:

.jumbotron{
    background-position-y: 0;
}

background-position-y 属性将设置背景图像在 y 轴上的起始位置，希望对您有所帮助，谢谢。