背景视频没有JS的视差效果

Question

使用图像，您只需使用：

background-attachment: fixed;

有没有办法在不使用JS的情况下通过视频实现视差效果？

链接到我的示例网站以供参考： https://captain-stoves-76350.netlify.com/

Answer 1

是，

将您的视频片段设置为：

position: fixed;
top: 0;

然后在内容的其余部分添加一个包装器div并执行：

position: relative;
z-index: 1;

然后根据视频的高度为您的身体添加填充：

padding-top: 500px;

注意：这仅在您的视频位于页面顶部时才有效，但如果您需要进一步缩小，则可以使用top: x;值，只需确保你的其他内容都在你的包装器中，而z-index的设置高于你的视频div。