我正在尝试模仿lumosity.com的首页,但无法为该部分设置视频背景。到目前为止,这是我所做的:
的HTML
<section id="banner">
<video id="videobcg" preload="auto" autoplay="true" loop="loop" muted="muted" volume="0">
<source src="https://static.lumosity.com/resources/home_page_templates/574/neuralnetwork.mp4" type="video/mp4">
<source src="movie.webm" type="video/webm">
Sorry, your browser does not support HTML5 video.
</video>
<p>This is text that is in front of video, we do not want the z-index of video to be greater than content. Hence background!
</p>
</section>
的CSS
#videobcg {
position: absolute;
top: 0px;
left: 0px;
padding: 5em 2em 4em 2em;
z-index: -1000;
overflow: hidden;
}
如您所见,我的代码无效,该视频仍然隐藏在网页上的某个位置。有任何想法吗?
我以此为例,并修改了您的CSS。
示例1:以视频作为包含div的背景
在此示例中,视频仅作为包含div的背景播放,类似于lumosity.com:
#banner {
position: relative;
height:300px;
width:100%;
overflow: hidden;
}
#videobcg {
position: absolute;
top: 0;
left: 0;
min-width: 100%;
min-height: 100%;
height:auto;
width:auto;
z-index: -100;
}
示例2:将视频作为整页的背景
#videobcg {
position: absolute;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -100;
transform: translateX(-50%) translateY(-50%);
background-size: cover;
transition: 1s opacity;
}
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句