我想在整页视频下方添加内容。但是在添加时,内容会填充在视频上方而不是下方。
所以,我要找的是:
但相反,我通过视频获取文本:jsFiddle
HTML
<div id="video-container">
<video id="bgVid" loop class="fillWidth" autoplay poster="<?php echo bloginfo( 'template_directory' ) . '/images/ship-bg.jpg'; ?>" alt="ship cargo">
<source src=video/science.mp4 type=video/mp4>
</video>
</div>
<div id="underneath">
<p style="color:#fff">content underneath</p>
</div>
CSS
#video-container {
position: absolute;
}
#video-container {
top:0%;
left:0%;
height:100%;
width:100%;
overflow: hidden;
}
video#bgVid {
position:absolute;
z-index:-1;
background: url('../images/ship-bg.jpg') no-repeat;
background-size: cover;
transition: 1s opacity;
}
video#bgVid.fillWidth {
width: 100%;
}
我尝试过,玩过,但失败了。任何人都可以请教。
非常感谢。
最佳答案
试试这个
#underneath{
position:relative;
z-index:-2;
}
关于css - 全屏视频下添加内容-定位,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28831859/