html - 可以滚动的完整背景图像(最初固定)

Question

我正在尝试建立一个我自己的网站，其中我有一个背景图像，在最初加载时覆盖整个页面。我也希望它具有响应性，这样无论屏幕大小如何，我都可以看到整个背景图像。

这里有一个问题，当我滚动页面时，我希望下一个 div 或元素在下方准备好(滚动时)。我能立即想到的最佳引用是 fiftythree.com .

Answer 1

您在 fifththree.com 上看到的仅仅是一个具有视口(viewport)高度大小和背景图像集的 div。

要使图像根据屏幕尺寸缩放，请将其设置为 background-size: cover。

.hero {
    background-color: salmon;
    /* background-image: url(...); */
    background-position: center;
    background-size: cover;
    color: #fff;
    height: 100vh;
    overflow: hidden;
}

.hero__title {
    margin-top: calc(50vh - 2em);
    text-align: center;
}

.wrapper {
    padding: 1em;
}

<link href="https://necolas.github.io/normalize.css/3.0.2/normalize.css" rel="stylesheet"/>
<div class="hero">
    <h1 class="hero__title">Look at this</h1>
</div>

<div class="wrapper">
    <h2>Hello earthling</h2>
</div>