Question

我尝试为我的网站实现视频背景。我希望它位于页面顶部（这意味着无论窗口的高度如何，当滚动条位于最高位置时，背景应该是整个视频），然后我将其放置在视频前景中的某些内容也位于视频下方。现在，我使用以下CSS：

#myVideo {
    position: absolute;
    right: 0;
    bottom: 0;
    min-width: 100%;
    min-height: 100%;
}

我的HTML的结构如下：

<header>
  <video autoplay muted loop id="myVideo">
    <source src="video.mp4" type="video/mp4">
  </video>

  <div class="container">
    --- Content on the foreground
  </div>
</header>
<section>
  -- Content below the video
</section>

现在我可以在整页上得到想要的结果，但是它没有响应。当我减小屏幕尺寸时，视频会根据需要保持全屏显示，但是视频下方的内容会向上移动并与视频重叠。我该如何解决？

Answer 1

从给出的代码中，#myVideo元素已从文档的正常流程中删除，因此其他元素将其忽略，这很好，但它相对于视口而不是{{1} }元素。创建一个针对header元素的规则，如下所示：

header

制作header { height: 100vh; position: relative; }意味着视频相对于它定位，并且position: relative的高度将是视口高度的100％。下面的代码将header元素放置在#myVideo元素的左上方，并使它的宽度/高度为header元素的100％。

header

HTML-响应性地将视频放置到后台

1 个答案: