Question

我在堆栈上搜索，但似乎找不到有效的解决方案。我的网站在两个单独的div中的两个单独的视频上具有两种视差效果。第一个工作正常。

第一个HTML的外观

<div class = "divVideo">
    <video autoplay muted loop class="Video">
        <source src="Videos/Walk.mp4" type="video/mp4">
        Your Browser does not support Video Element.
    </video>
</div>

CSS:

.divVideo{
    height: 100%;
    width: 100%;
}

.Video {
    position: fixed;
    z-index: -100;
    background-size: cover;
    transition: 1s opacity;
}

第二个有类似的HTML代码，我使用相同的CSS属性，但是它不起作用。它只是在第二格中以视差显示了以前的视频。

我还尝试更改position to relative，但这只是消除了视差并正常显示我想要的视频。

此外，当我删除第二个视频div的CSS代码并只有以下内容时：

.divVideo2 {
height: 400px;
width: 100%;
}

这是第二个视频的CSS

.Video2 {
    position: fixed;
    z-index: -100;
    background-size: cover;
    transition: 1s opacity;
}

在我应用CSS属性之前，他对第二视频类不做任何事情。它只是显示实际的视频大小。

div上的视差视频效果

0 个答案: