将视频作为背景嵌入到 div 中（引导程序）

Posted 2023-03-15

【中文标题】将视频作为背景嵌入到 div 中（引导程序）

【英文标题】：Embedding video as background in a div (bootstrap)

【发布时间】：2015-01-08 16:56:20

【问题描述】：

我正在尝试在 div 中添加视频作为背景（.form-container），过去我对全背景页面执行相同操作，但在这种情况下，我只需要在 div 中使用它，问题: 不知道怎么做，我玩的是宽度，但是视频没有覆盖整个 div。

这是一个全背景视频，但显然不起作用。我试图使用 z-index，但我对 twitter-bootstrap 如何处理 z-index 感到非常迷茫：

#main video 
    background: #222;
    position: fixed;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -100;
    transition: 1s opacity;
    opacity: 0.5; 

查看演示：http://codepen.io/wiitohzjeh/pen/vEgmEO?editors=110

当我尝试将宽度更改为 100% 并将最大高度设置为 250 像素以“适合” div 时..

#main video 
    background: #222;
    position: fixed;
    width:100%;
    max-height: 250px;
    transition: 1s opacity;
    opacity: 0.5;

查看演示：http://codepen.io/wiitohzjeh/pen/LExyEK?editors=110

【参考方案1】：

将您的视频容器设置为position: relative，然后将您的视频位置更新为absolute，以便它“粘”在容器上。

#main .form-container 
    min-height: 250px;
    padding-bottom: 50px;
    margin-top: 50px;
    -moz-box-shadow:  0 2px 5px 0 #333;
    -webkit-box-shadow: 0 2px 5px 0 #333;
    box-shadow: 0 2px 5px 0 #333;
    position: relative;
    overflow: hidden;


#main video 
    background: #222;
    width:100%;
    background-size: cover;
    transition: 1s opacity;
    opacity: 0.5;
    position: absolute;
    top: 0;
    left: 0;

http://codepen.io/anon/pen/VYPbXj

【讨论】：

非常感谢您的帮助，Bariel！谢谢！