如何使用视差滚动制作一个固定背景

Question

是否可以有一个固定的视频 gif 页面，然后当我滚动时，只需在该固定视频 gif 页面上添加内容。所以它只有一页，但当用户滚动时，内容会添加。

Answer 1

回答

你必须使用bg-scroll 。 这是一个实现您想要的示例：

<div class="h-screen bg-cover bg-scroll overflow-auto" style="background-image: url('your_gif_here.gif')">
    Your page content
</div>

现在您的背景是固定的并且是整页宽度，而您的内容可以在背景之上滚动。

这是 Tailwind Play 的简单演示。

---

让我知道事情的后续： ：）