Question

目标： 仅使用HTML和CSS将视频添加为背景。

这里的想法是让一个视频在循环中运行，不允许与用户进行任何交互作为背景。

在视频前面我想要一些元素。一些文字......

问题使用此代码：一切似乎都按预期工作但有一点：视频就在其他一切的前面。我如何把它放在其他元素后面？

HTML：

<div id="home" class="home3">
      <video style="width: 100%" src="video/bg_video.mov" autoplay="true" loop="true" muted="true">
        <div class="home-text-wrapper">
          <div class="sixteen columns">           
            <div class="home-logo-text">
              <a href="#about">Hevar</a>
            </div>
          </div>   
            <a href="#about">    
              <div class="container clearfix">
                <div class="home-quote">
                  <h1>
                    <span class="slabtext">some text</span>
                    <span class="slabtext">some text</span>
                    <span class="slabtext second-child"> some text</span>      
                    <span class="slabtext">some text</span>
                  </h1>
                </div>
              </div>
            </a>   
        </div>
        </video>
      </div>

CSS：

#home {
position: relative;
overflow: hidden;
height: 100%;
width: 100%;
display: table;
color: #010101;
z-index:10;

.home3 .home-text-wrapper .container {
width: 350px;
height: 350px;
border-radius: 50%;
background: rgba(0, 0, 0, 0.61);
text-align: center;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
box-shadow: 0px 0px 0px 10px rgba(255, 255, 255, 0.24);
overflow: hidden;
}

.home3 .home-text-wrapper .container.no-safari {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.home3 .home-quote {
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
display: table-cell;
vertical-align: middle;
height: inherit;
text-align: center;
width: inherit;
overflow: hidden;
color: white;
}
.home3 .slabtextdone {
color: #ffffff;
}
.home3 .slabtextdone .slabtext.second-child {
display: inline-block;
width: auto;
color: steelblue;
text-shadow: none;
overflow: hidden;
}
.home3 .home-text-wrapper .container:hover {
-webkit-transform: scale(1.09);
-moz-transform: scale(1.09);
-o-transform: scale(1.09);
-ms-transform: scale(1.09);
transform: scale(1.09);
box-shadow: 0px 0px 0px 15px rgba(255, 255, 255, 0.24);
-webkit-transform-style: preserve-3d;
overflow: hidden;
}
.home3#home h1 {
font-size: 30px;
overflow: hidden;
margin: 0 50px;
}

Answer 1

video{
  position: fixed;
  min-width: 100%;
  min-height: 100%;
  z-index: -100;
  left: 0;
  bottom: 0;
}

修复你的HTML：

<video></video>
rest code <div></div>

Answer 2

感谢Guarana和floor！

这解决了它：

.video_bg {
position: fixed;
width: 100%;
z-index: -100;
}

带有重叠元素的视频背景

2 个答案: