html - 视频作为背景视差 CSS

Question

我是后端而不是前端，所以如果你认为我的问题是假的，很抱歉，但我找不到答案:)

我的目标是使用 CSS 制作具有视差的背景视频。总的来说，我确实做到了，但结果还不够好。由于某种原因，背景中的视频在所有部分下，而不是只在它应该在的一个部分中......

HTML:

<div class="fullScreenPhoto"></div>
<div class="video-container">
  <video autoplay poster="" class="video-parallax" loop muted>
    <source src="https://showbox-tr.dropbox.com/transcode_video/t/1qz2fy47wt9ay7i/header_background.mp4" type="video/webm">
    <source src="https://showbox-tr.dropbox.com/transcode_video/t/1qz2fy47wt9ay7i/header_background.mp4" type="video/mp4">
  </video>
</div>

<div class="fullScreenPhoto2"></div>

<div class="fullScreenPhoto3"></div>

CSS:

body{
  margin: 0;
  padding:0
}

.fullScreenPhoto{
  width: 100%;
  margin:0;
  height:300px;
  background-color: red;
}

.fullScreenPhoto2{
  width: 100%;
  height:300px;
    margin:0;
  background-color: green;
}
.fullScreenPhoto3{
  width: 100%;
    margin:0;
  height:300px;
  background-color: yellow;
}

video {
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -100;
    transform: translateX(-50%) translateY(-50%);
    background-size: cover;
    transition: 1s opacity;
}

.video-container {
    height: 600px;
}

.video-parallax {
    -webkit-transition-position: fixed;
    position: fixed;
}

在这里你可以摆弄: Fiddle

我在哪里重复了我的问题。如果您要隐藏一个部分，或将 z-index 更改得更高，您会看到该视频遍布整个页面...

顺便说一句。我知道插件 jQuery -> https://github.com/linnett/backgroundVideo ，但我只想使用 CSS。

Answer 1

您可以像处理图像视差一样轻松地做到这一点。

HTML:

<div class="ParallaxVideo">
  <video autoplay muted loop>
  <source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
  <source src="http://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg">
  </video>
  <h1>Video Background</h1>
</div>

CSS

.ParallaxVideo{ 
    height: 300px;
    padding-bottom: 50px;
    padding-top: 50px; 
}
.ParallaxVideo video{ 
    min-width: 100%;
    position: fixed;
    top:0;
    z-index: -999;
}
.ParallaxVideo h1 {
  color: #fff;
  font-size: 76px;
  font-weight: 700;
  text-align: center;
  text-transform: uppercase;
}

您还可以查看本教程以获取更多详细信息:

https://codeconvey.com/video-parallax-background-using-css3/

这是演示版:

http://codeconvey.com/Tutorials/VideoParallaxBackground/