css - 如何在 css 中的背景图像和元素之间添加空间？

Question

我正在尝试制作优步的网站。我想在背景图片和 div 之间添加空间。

我尝试使用 margin 、 padding 和 top 50% 但它们都不起作用。我只想从顶部添加空间

HTML

<header id="main-image">
    <div class="main-navigation">

    </div>
</header>

CSS

#main-image {
    background: url(/images/earn_2x.webp);
    width: 100vw;
    height: 100vh;
    z-index: -55;
}

.main-navigation {
    width: 80%;
    margin: auto;
    height: 200px;
    background: #fff;
}

Answer 1

试试 background-position。这仅在背景图像未设置为重复模式时有效。

例如:

background-position-y: 10px;
background-repeat: no-repeat;

这将从顶部添加 10px 的空间。