DIV在html5视频之上

Question

我遇到了麻烦，需要帮助！我正在尝试将视频用作背景，然后将文本和图像放在div中。

这是我到目前为止所做的：

<section id="VideoSection>  
    <div id="VideoText">Testing 123</div>
    <video autoplay loop poster="polina.jpg" id="bgvid">
        <source src="movie.mp4" type="video/webm">
    </video>
</section>

这是我的CSS：

video#bgvid {
    z-index: -2;
}

#VideoText{
    position: absolute;
    z-index: -1;
}

Answer 1

尝试将position:relative提供给父元素并将position:absolute提供给子元素，然后提供top或left值。检查 DEMO 。

section#VideoSection{position:relative;}

video#bgvid 
{
  position: absolute;
  z-index: 0;
  top:0;
  left:0;
}
#VideoText{
position: absolute;
z-index: 1;
top:12px;
}

Answer 2

的 -DEMO-

<section id="VideoSection">

    <div id="VideoText">Testing 123</div>
    <video id=bgvid autoplay muted poster="http://media.w3.org/2010/05/bunny/poster.png">
        <source id="mp4" src="http://media.w3.org/2010/05/bunny/movie.mp4" type="video/mp4">
        <source id="ogv" src="http://media.w3.org/2010/05/sintel/trailer.ogv" type="video/ogg">
        <p>Your user agent does not support the HTML5 Video element.</p>
    </video>
 </section>

的CSS：

video#bgvid {
    z-index: -2;
}

#VideoText{
    position: absolute;
    z-index: 1;
}

然后将position:relative;添加到#VideoSection，以便您可以在文字上使用绝对位置

#VideoSection{
    position:relative;
}

-Demo-