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提供自己的背景，图像，视频或仅颜色。因此，您可以简单地将DIV放在彼此之上（较小的元素仅覆盖较大元素的一部分），使用绝对或固定位置和z-index进行放置。

您的代码只包含一个元素，因此无法使用该代码进行演示。您需要发布更多内容，并提供更详细的信息，说明应该在哪里。

视频背景仅在身体的一部分

1 个答案: