html - 视频背景仅在 body 的一部分

Question

我知道可以用css制作全屏视频背景

但是如何只显示一段视频背景呢？

比如我在part中创建了一个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 提供自己的背景、图像、视频或只是一种颜色。因此，您可以简单地将 DIV 放置在彼此之上(较小的元素仅覆盖较大元素的一部分)，使用绝对或固定位置和 z-indexes 来放置它们。

您的代码仅包含一个元素，因此无法使用该代码对其进行演示。您需要发布更多内容并提供更多关于应该在何处的详细信息。