视频作为背景视差 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。

原文由 dmoczydlowski 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

如果你想让视频只作为这个 div 的背景，那么你就不能有视差效果，因为你需要删除 position: fixed .video-parallax （所以这个类的所有样式都和我一样请参阅）并将 video 的样式更改为：

 video {
    margin:0 auto;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -100;
    background-size: cover;
    transition: 1s opacity;
}

原文由 Joint 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

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

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/

原文由 ashfaq ahmed 发布，翻译遵循 CC BY-SA 4.0 许可协议