如何在 css/html 中将视频作为页面背景？

Question

我曾尝试使用 <video> 标签将视频作为组件放置，但这似乎涵盖了所有或大部分组件，我想问是否有办法设置页面的实际背景成为视频（最好是视频或 gif）或始终将组件放在所有组件下方。

我最好的尝试，将所有位置都设置为相对位置，但所有 navs/buttons 都不可点击：

<body>
  <div>
    <video autoplay muted loop id="myVideo">
      <source src="/assets/videos/circuit-board-hero.mp4" type="video/mp4">
    </video>
  </div>
<div>
[...]
</div>

<style>
.nav {
    position: relative;
}
.logotext {
    padding-left: 20px;
    text-decoration: none;
    color: #fff;
    text-transform: uppercase;
    display: block;
    font-weight: 600;
    letter-spacing: .2em;
    font-size: 20px;
    position: relative;
  }

  #myVideo {
    position: fixed;
    right: 0;
    bottom: 0;
    min-width: 100%;
    min-height: 100%;
  }
</style>

我用的是SASS btw，上面是编译的CSS...

Answer 1

你可以试试这个：

.nav {
    position: relative;
}
.logotext {
    padding-left: 20px;
    text-decoration: none;
    color: #fff;
    text-transform: uppercase;
    display: block;
    font-weight: 600;
    letter-spacing: .2em;
    font-size: 20px;
    position: relative;
  }
  #myVideo {
    position: fixed;
    right: 0;
    bottom: 0;
    min-width: 100%;
    min-height: 100%;
    z-index:-1;
    filter: brightness(0.5);
  }
   h1, h2 
   {
        color: white;
        font-family: Trebuchet MS;
        font-weight: bold;
        text-align: center;
    }

    h1 {
      font-size: 6rem;
      margin-top: 30vh;
    }
    h2 { font-size: 3rem; }

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title></title>
</head>
  <body>
  <div>
    <video autoplay muted loop id="myVideo">
      <source src="https://assets.codepen.io/6093409/river.mp4" type="video/mp4">
    </video>
  </div>
<div>
  <h1>THIS IS A RIVER.</h1>
<h2>How Are you.</h2>
</div>

</body>
</html>

Answer 2

试试这个：

 #myVideo {
    position: fixed;
    right: 0;
    bottom: 0;
    min-width: 100%;
    min-height: 100%;
     z-index:-1;
  }

如何在 css/html 中将视频作为页面背景？

How can I put a video as a the background of the page in css/html?

html

css

sass