html - 重叠粘性元素但内容保持默认滚动

Question

我在表述我的问题时有些挣扎，并且还没有在网上找到解决方案。

我的问题：我正在创建应该堆叠在一起的全视口幻灯片（具有透明度）。有很多解决方案。但我希望幻灯片的内容正常滚动，就像您滚动普通网站时所期望的那样（即文本不会卡在屏幕顶部，但背景会卡住）。

这是我玩了几个星期的纯 html 示例。我不知道这是否是最有希望的解决方案，但我认为它解释了我想要实现的目标。注意：行为已经有些正确，但是幻灯片之间有很多不必要的间距（=目标是“连接”右侧的灰色背景而没有间距）。我认为对此有更好的解决方案。

更新了此代码段以匹配评论中的提议。我们显然走得更近了，但是正如您在更新的代码段中看到的那样，有很多不必要的间距。

body {
        margin: 0;
        padding: 0;
        color: #000;
    }

    h1, h2, p {
        text-align: center;
        width: 100%;
        position:relative;
    }
    h1 {
        margin-top: 40vh;
        min-height: 20vh;
        font-size: 48pt;
    }

    .background.a {
        background-image: linear-gradient(to right, #f00a, #fff0 10%);
    }
    .background.b {
        background-image: linear-gradient(to right, #fff3 20%, #0f0a 30%, #fffa 40%);
    }
    .background.c {
        background-image: linear-gradient(to right, #fff3 50%, #00fa 60%, #fffa 70%);
    }

    .background {
        position: sticky;
        height: 100vh;
        top: 0;
    }

    .content {
        min-height: 100vh;
        position: relative;
        top: -100vh;
    }

<div class="background a"></div>
    <div class="content">
        <h1>Some content</h1>
        <h2>creates slides with images ...</h2>
    </div>
    <div class="background b"></div>
    <div class="content">
        <h1>More content</h1>
        <h2>creates slides with images ...</h2>
    </div>
    <div class="background c"></div>
    <div class="content">
        <h1>Some more content</h1>
        <h2>creates slides with images ...</h2>
    </div>

我希望你能得到我想要达到的目标。我总是想知道这些不精确的 Stack Overflow 问题，现在我自己写一个并没有做得更好……非常感谢。如果我应该澄清一些事情，请告诉我。

标签： htmlcsssticky