使用具有 100% 高度的颜色叠加层的背景视频

Posted 2023-03-15

【中文标题】使用具有 100% 高度的颜色叠加层的背景视频

【英文标题】：Using a Background video with a colour overlay with 100% height

【发布时间】：2013-12-30 21:16:17

【问题描述】：

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

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

我面临的两个问题是视频占据网站或将内容下推。

这是一个演示：http://jsfiddle.net/NpgD5/248/

我的 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）

【参考方案1】：

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

【讨论】：

对不起，我没有注意到颜色覆盖部分。

【参考方案2】：

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

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

您尝试实现的布局的可视化表示确实有助于获得更好的答案。