h2文本不会出现在视频上

时间:2016-12-18 18:26:43

标签: html css

文字不会显示在视频的顶部。 我基本上想要一个标题,我称之为标题,以显示覆盖在视频上。我已经尝试摆弄z-index并且它没有改变,我注意到当我替换视频时,文本工作的图像,使用不同的CSS代码,我假设他们是css的问题。

请帮助我,谢谢。

CSS代码:

.home-subheading {
font-family: 'Montserrat',sans-serif;
font-size: 14px;
letter-spacing: .5px; 
font-weight: 400;
color: #ccc; 
z-index:999!important;
}

.tp-banner .home-subheading {
line-height: 40px!important;
#home-revolution-slider  {
width: 100%;
height: 100%;
min-height: 100%;
z-index: -99;

}
.hero {
position: fixed; 
z-index: -99;
top: 0;
bottom:  0;
left: 0;
right: 0;
background-size: cover; 
}
.content {
position: relative;
z-index: 3; 
background-color: #fff;
}
.home-heading,
.home-subheading,
.home-button {
position: absolute;
z-index: 999; 
text-align: center;
transform: translateY(0px);
/*-webkit-transition: 1s opacity ease-in-out;*/
}
.tp-loader.spinner1 {
width: 40px;
height: 40px;
background: url(../img/assets/rev-loader.gif) no-repeat center center;
background-color: transparent;
box-shadow:  none;
-webkit-box-shadow: none;
margin-top: -20px;
margin-left: -20px;
-webkit-animation: none;
animation: none;
border-radius: 0;
-moz-border-radius: 0;
-webkit-border-radius: 0;
}

.tp-banner-container{
width:100%;
position:relative;
padding:0;
margin-top: 0;
z-index: -1;
} 
.tparrows.preview4:after {
background: #fff;
background: rgba(255,255,255,.05);
}
.tp-caption a {
color: #fff;
padding: 9px 22px;
box-shadow: 0 -3px rgba(0, 0, 0, 0.3) inset;
-moz-box-shadow: 0 -3px rgba(0, 0, 0, 0.3) inset;
-webkit-box-shadow: 0 -3px rgba(0, 0, 0, 0.3) inset;
-o-box-shadow: 0 -3px rgba(0, 0, 0, 0.3) inset;
margin: 0 7px 0 7px;
text-transform: uppercase;
}
.tp-caption a:hover {
color: #fff;
}
.html5-video-container video {
width: 100%!important;
height: auto!important;
left: 0!important;
z-index: -99;

}

.tp-banner-video video{
min-width: 100%;
z-index: -3; 

HTML代码:                                                                                                                                                      

                            <!-- MAIN IMAGE -->
                        <video src="img/coding.mp4"  autoplay loop alt="video_typing_cover"  data-bgposition="center center" data-bgfit="cover" data-bgrepeat="repeat"></video>

                            <!-- LAYERS -->

                                <!-- Home Heading -->
                                <div class="tp-caption sft"
                                    data-x="center"  
                                    data-y="260"
                                    data-speed="1200"
                                    data-start="1100"
                                    data-easing="Power3.easeInOut"
                                    data-splitin="none"
                                    data-splitout="none"
                                    data-endspeed="300"
                                    style="z-index: 4; max-width: auto; max-height: auto; white-space:normal;">
                                    <h2 class="home-heading op-1">Digital Hive</h2>
                                </div>

                            <!-- LAYER NR. 1 -->
                            <div class="tp-caption tp-fade fadeout fullscreenvideo"
                                data-x="0"
                                data-y="0"
                                data-speed="1000"
                                data-start="1100"
                                data-easing="Power4.easeOut"
                                data-elementdelay="0.01"
                                data-endelementdelay="0.1"
                                data-endspeed="1500"
                                data-endeasing="Power4.easeIn"
                                data-autoplay="true"
                                data-autoplayonlyfirsttime="false"
                                data-nextslideatend="true"
                                data-volume="mute" 
                                data-forceCover="1" 
                                data-aspectratio="16:9" 
                                data-forcerewind="on" 
                                style="z-index: 2;">
                                <video class="img-responsive" preload="none" 
                                poster='example'> 
                                <source src='img/coding.mp4' autoplay    type='video/mp4' />
                                </video>
                            </div> 

0 个答案:

没有答案