Question

我正在尝试添加具有透明度颜色叠加层的背景视频。

我已经设置了网站结构，每个Div部分的高度为100％，背景颜色。第一个div部分我想播放通过透明背景颜色可见的视频。

我面临的两个问题是每个视频都会占用网站或者推送内容。

我的html目前看起来像这样：

 <div class="top-section">
   <div id="bg"><video src="" id="bg-video" muted autoplay loop ></video></div>
    <nav> </nav>      
   <div id="center-column">
     <h1>WELCOME</h1>
   </div>
  <div class="mid1-section"></div>
  <div class="mid2-section"></div>
  <div class="bottom-section"></div>
 </div>

CSS：

html, body{
  background-color: #ECF0F1;
  min-height:100%;
  overflow-x: hidden;
  margin: 0;
  padding: 0;
}


#bg {
position: fixed;
top: -50%;
left: -50%;
width: 200%;
height: 100%;
}


/*HTML5 VIDEO*/
#bg video {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
min-width: 100%;
min-height: 50%;
}

.top-section{
background-color: #3498DB;
background-repeat: repeat;
position: fixed;
top: 0;
left: 0;
min-width: 100%;
min-height: 100%;
z-index: 2;
}

.mid1-section{
  min-height:100%;
  width: 100%;
  background-color: #16A085;
  margin: 0;
  padding: 0;
  text-align: center;
  position: relative;
}

感谢您的任何反馈（Y）

Answer 1

删除div并单独设置视频样式

Answer 2

我假设您希望视频成为页面本身的背景。

如果是这种情况，您应该尝试使用不同的z索引制作2个主要元素。一个是bg的视频和内容的包装。

您尝试实现的布局的直观表示将有助于获得更好的答案。

使用背景视频，颜色覆盖率为100％高度

2 个答案: