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 - ＆gt; https://github.com/linnett/backgroundVideo，但我想只使用CSS。

Answer 1

您需要为height元素设置css video，或者为<video height="400">设置元素本身。 Updated Fiddle

Answer 2

如果你想让视频只为这一个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;
}

Answer 3

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

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/

Answer 4

为此，我正在使用Materialize CSS。这很简单。我们希望将视频作为背景视差CSS。

带有材料CSS的HTML

 <style>
 #anyvideo{
        position: absolute;
        right: 0;
        bottom: 0;
        min-width: 10%;
        min-height: 100%;
       }
</style>

<div class="video-container parallax-container">
    <video autoplay muted loop id="anyvideo">
        <source src="somevideo.mp4" type="video/mp4">
    </video>
</div>

我们还可以使视频具有响应性，即相应地调整屏幕尺寸。

<div class="video-container parallax-container">
    <video autoplay muted loop id="anyvideo" class="responsive-video">
        <source src="somevideo.mp4" type="video/mp4">
    </video>
</div>

在上面的代码中，仅仅添加了 class =“ response-video” ，这使视频具有响应性。

视频作为背景视差CSS

4 个答案: