作者:sawachan_107 | 来源:互联网 | 2023-05-27 18:10
我试图在div中添加一个视频作为背景(.form-container),在过去我对完整背景页面做同样的事情,但在这种情况下我只需要在div中,问题:dunno how要做到这一点,我正在玩宽度,但视频不覆盖整个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%并将"最大高度"设置为250px时,"适合"div.
#main video {
background: #222;
position: fixed;
width:100%;
max-height: 250px;
transition: 1s opacity;
opacity: 0.5;
}
请参阅演示:http://codepen.io/wiitohzjeh/pen/LExyEK?编辑= 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