Question

我使用此网站创建了视频背景作为参考

http://marketblog.envato.com/tips/video-background-html5-video/

它似乎很好地工作到这一点但我有一个问题我的文本课不在视频内，任何人都可以帮助，谢谢你。

P.S。我使用bootstrap 3

<div class="container-fluid" id="bgvid">
                <video autoplay loop muted poster="video.jpg">
                    <source src="480p.mp4" type="video/mp4">
                    <source src="480p.webm" type="video/webm">
                    </video>
                    <div class="content">
                        <div class="row">
                            <div class="col-lg-12">
                                <h1 class="content__heading">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h1>
                                <p class="content__teaser">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                                <h2><i class="glyphicon glyphicon-menu-down" id="arrow"></i></h2>
                            </div>
                        </div>
                    </div>
                </div>

html, body, div, h1, p, a, video {
margin: 0;
padding: 0;
}


#bgvid{
padding: 0;
}

#bgvid .content{
position: relative;
top: 30%;
z-index: 2;
padding: 0;
margin: 0 auto;
max-width: 720px;
text-align: center;
}

.content__heading{
margin-bottom: 24px;
color: rgb(89,89,89);
}

#bgvid .content__teaser{
margin-bottom: 24px;
color: rgb(89,89,89);
}

html, body{
height: 100%
}

.video{
position: fixed;
top: 50%; left: 50%;
z-index: 1;
transform: translate(-50%,-50%);
min-width: 100%; min-height: 100%;
width: auto; height: auto;
background: url(thelanguage.jpg) no-repeat;
background-size: cover;
}

#arrow{
text-align: center;
color: white;
}

Answer 1

您的视频类的z-index为1，因此文本可以在其后面，将段落的z-index设置为高于1的值。如果您还没有看到它，检查DOM并找到该文本。它必须与z-index或显示/位置组合。

为什么我的视频背景中没有文字

1 个答案: