Html 带容器的视频背景

我正在一个新的网站上工作，实现了视频背景。我有它的设置，使它填补了屏幕的高度查看网站。视频下面有一个容器/行，在用户向下滚动之前不会显示。我想做的是将该容器向上移动，使其在屏幕上可见，而无需向下滚动。本质上，用户只是先看到视频背景和导航栏，没有任何内容。我想避免这种情况

我使用W3CSS

（函数（）{
/***视频元素*@type{HTMLElement}*/
var video=document.getElementById（“我的视频”）；
/***检查视频是否可以播放，并播放*/
video.addEventListener（“canplay”，函数（）{
video.play（）；
});
})();
.content{
/*最高：70%*/
位置：相对位置；
z指数：500；
利润上限：-550px；
保证金：0自动；
宽度：100%；
}
.包含标题{
位置：相对位置；
溢出：隐藏；
}
.主标题{
最小高度：100vh；
显示：绝对；
颜色：#fff；
背景色：rgba（0,0,0,0.4）；
}
视频#我的视频{
位置：绝对位置；
最高：50%；
左：50%；
最小宽度：100%；
最小高度：100%；
宽度：自动；
高度：自动；
z指数：-100；
-ms转换：translateX（-50%）translateY（-50%）；
-moz变换：translateX（-50%）translateY（-50%）；
-webkit转换：translateX（-50%）translateY（-50%）；
转化：translateX（-50%）translateY（-50%）；
背景尺寸：封面；
}
录像带{
显示：块；
}

选择你的卡车
我们有合适的卡车装载

查看我们的舰队

为我们工作
成为货运经纪人

查看优点/应用程序

联系我们
找不到你要找的东西吗？

给代表打电话/发电子邮件

您可以添加：

.main-header {position: fixed; width: 100%;}

然后调整另一个容器的css，使其看起来像它想要的样子。
不完全理解为什么要用那个大的红色块遮住这个酷的背景，所以我把它做成了半透明的

变化
最后一个选择器加倍，以覆盖
.w3 red
的
背景色规则。我也被迫使用
！重要信息
（不推荐），因为三分之一的
w3.css
规则集具有
！重要信息
。这是非常死板和明显的坏。无论如何，颜色是rgba，前三个数字是红、绿、蓝复合色，第四个数字的不透明度范围为0到1（0不可见，1可见）

补充

.w3移动版
响应速度快

.w3在前两列中隐藏较小的
，因为您希望在有限的空间中只包含基本内容

。w3隐藏介质
如上所述


远离的

.w3包含不响应的固定宽度容器


选择权

如果您仍然喜欢底部的条形图，请按照以下规则调整：


.content{top:0；..
到
{bottom:0；..

如果仍然希望条形图更加不透明，请调整以下规则：


.RED.RED{背景色：rgba（244,67,54,1）！重要；}
将第四个数字的最大值改为1


演示

（函数（）{
/***视频元素*@type{HTMLElement}*/
var video=document.getElementById（“我的视频”）；
/***检查视频是否可以播放，并播放*/
video.addEventListener（“canplay”，函数（）{
video.play（）；
});
})（）；
.content{
/*增加*/
排名：0；
/*增加*/
位置：绝对位置；
/*增加*/
高度：自动；
z指数：500；
保证金：0自动；
宽度：100%；
}
.包含标题{
位置：相对位置；
溢出：隐藏；
}
.主标题{
高度：100vh；
显示：绝对；
颜色：#fff；
背景色：rgba（0,0,0,0.4）；
/*增加*/
z指数：-1；
}
视频#我的视频{
位置：绝对位置；
最高：50%；
左：50%；
最小宽度：100%；
最小高度：100%；
宽度：自动；
高度：自动；
z指数：-100；
-ms转换：translateX（-50%）translateY（-50%）；
-moz变换：translateX（-50%）translateY（-50%）；
-webkit转换：translateX（-50%）translateY（-50%）；
转化：translateX（-50%）translateY（-50%）；
背景尺寸：封面；
}
录像带{
显示：块；
}
/*增加---------------------------*/
.l4{
利润率最高：10%；
}
.红色，红色{
背景色：rgba（244,67,54,1）！重要；
}

选择你的卡车
我们有合适的卡车装载！查看我们的车队

为我们工作
成为货运经纪人
查看利益/应用

联系我们
找不到您要找的内容？
给代表打电话/发电子邮件

你能详细描述一下你想要的结果吗？你想要视频顶部的红色条还是底部的红色条？你想要视频前面的红色条吗？@WhiteHotLoveTiger重新连接了该图像！我想要视频前面底部的红色条。在我修改后，这确实起到了作用，但是，该图像现在跨越了这是整个页面的长度。我可以在div之间的空格中看到它，而以前我看不到。可爱的解决方案！非常感谢！同时，感谢您将更改内容分解为以下内容：）非常欢迎。当您获得更多经验时，请尝试试用
w3.css
文件。尽管它过度使用了
！important
，但它仍然可以基本功做得很好。
.content {
  top: 0;
  position: absolute;
  height:auto;
  ...
}

.main-header {
  z-index:-1;
  ...
}

.l4 {
   margin-top: 10%;
  }

.RED.RED {
  background-color: rgba(244, 67, 54, .3) !important;
}