全屏视频背景下的内容
问题描述:
工作实现全屏幕视频背景下的内容。全屏视频背景下的内容
到目前为止,我已经能够获得全屏视频工作没有问题。问题是我一直无法弄清楚如何在视频下添加内容。阿卡视频应折下停止:
目标:http://www.awesomescreenshot.com/0fa4atfpec
HTML:
<div class="container-fluid">
<div id='videoBG' class="row">
<video autoplay loop muted poster="screenshot.jpg" id="background">
<source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4">
</video>
<p id='mainHeader'> Header Title </p>
</div>
</div>
<div class="container-fluid">
<div class='row'>
<h1> Start of the second section below the video</h1>
</div>
</div>
CSS:
#background {
position: absolute;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -100;
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
background: url(polina.jpg) no-repeat;
background-size: cover;
}
答
你可以尝试使用视口大小 这种快速测试工作对我来说
<div style="background-color:red;width:100vw;height:100vh">
</div>
<div>
hi
<ul>
<li>ho</li>
<li>ho</li>
<li>ho</li>
<li>ho</li>
<li>ho</li>
<li>ho</li>
</ul>
</div>
答
进行视频容器div#videoBG
占据100vh
。这样,您可以在不推动下面的部分的情况下影响内部元素,例如#mainHeader
。另外,我添加了box-sizing: border-box
&重置margin
s & padding
s,以避免section
之间的不必要的间隙。
片段嵌入打破视高度,使外部检查: