视频背景仅在body的一部分中

Question

我知道可以使用CSS创建全屏视频背景

但是我只能在一个部分中显示视频背景？

例如，我在部分中创建一个800*600盒

如何使该部分的背景成为视频背景，其余部分仍然是图像背景？

这是我的CSS零件代码

nav{
  width: 800px;
  height: 600px;
     padding: 10px;
     border: 5px solid black;
     margin: 0;
  align-content: center;
  text-align: center;
  background-color: white;
  margin:auto;
  margin-top: 10px;
  margin-bottom: 50px;
}
video#bgvid {
    position: fixed;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -100;
    -ms-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    background: url(polina.jpg) no-repeat;
    background-size:cover;
}

和HTML代码

<nav>
  <video autoplay="autoplay" loop="loop" id="bgvid">
    <source src="http://courses.cs.cityu.edu.hk/cs2204/wildlife.mp4" type="video/mp4">
    <source src="http://courses.cs.cityu.edu.hk/cs2204/wildlife.ogg" type="video/ogg">
  </video>
</nav>

Answer 1

您可以给每个Div自己的背景，图像，视频或颜色。因此，您可以使用绝对或固定的位置和Z索引来放置，只需将Divs彼此放置（仅覆盖较大元素的部分的较小元素）。

您的代码仅包含一个元素，因此不可能用该代码证明它。您需要发布更多信息，并就应该在哪里进行更详细的信息。