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

Question

I have tried to put a video as a component using the <video> tag, but that seemed to cover all or most components, I am asking if there is a way to set the actual background of the page to be a video (preferably video or otherwise also gif) or put the component below all components at all times.我尝试使用<video>标签将视频作为组件放置，但这似乎涵盖了所有或大部分组件，我问是否有办法将页面的实际背景设置为视频（最好是视频或以其他方式还有 gif）或始终将组件放在所有组件下方。

My best attempt, putting all positions to relative, but all navs/buttons are not clickable:我最好的尝试，将所有位置都放在相对位置，但所有导航/按钮都不可点击：

<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>

I am using SASS btw, the above is compiled CSS...我用的是SASS顺便说一句，上面编译的是CSS...

Answer 1

try this:尝试这个：

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

Answer 2

You can try this:你可以试试这个：

 .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>

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

问题描述

2 个解决方案

解决方案1
1 2021-11-28 18:52:41

解决方案2
0 已采纳 2021-11-28 16:12:08

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

问题描述

2 个解决方案

解决方案1 1 2021-11-28 18:52:41

解决方案2 0 已采纳 2021-11-28 16:12:08

解决方案1
1 2021-11-28 18:52:41

解决方案2
0 已采纳 2021-11-28 16:12:08