Question

我想在背景视频上显示我的自定义div，我是如何以正确的方式进行的。

<section>
    <video autoplay muted id="bgvid" loop>
        <source src="http://video.webmfiles.org/big-buck-bunny_trailer.webm" type="video/mp4">
    </video>

    <div class="info">
        <h1>Welcome dear Friend</h1>
    </div>
</section>

<section class="about" id="about" data-content="about">
</section>

我创建了下一个样式，但我的class =“info”就在视频之下。

video { 
    position:fixed;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: -100;
 /*background: url('//demosthenes.info/assets/images/polina.jpg') no-repeat;*/
  background-size: cover;
  transition: 1s opacity;
}

section {   
    position: relative;
}
    section.video 
    {
        /*height:400px;*/
    }

    section.about 
    {
        background-image:url(../Images/backgrounds/blue.jpg);
        background-repeat:repeat;
        height:400px;
    }



.info { 
    /*position: absolute;z-index:1000;*/
  font-family: Agenda-Light, Agenda Light, Agenda, Arial Narrow, sans-serif;
  font-weight:100; 
  background: rgba(0,0,0,0.3);
  color: white;
  padding: 2rem;
  width: 33%;
  margin:2rem;
  float: right;
  font-size: 1.2rem;

}
h1 {
  font-size: 3rem;
  text-transform: uppercase;
  margin-top: 0;
  letter-spacing: .3rem;
}

如果视频位置已经固定，那么它将会显示在部分内部。

Answer 1

这里是我如何做到的......在这个例子中，我们有一个视频背景和一些垂直居中的文本，左对齐。

示例小提琴here

<div class="video-container">
    <video autoplay loop class="hero-video">
        <source src="path/to/video" type="video/webm"/>
        Your browser does not support the video tag.
    </video>
    <div class="hero-caption">
        <div class="hero-caption-inner">
            <h1>Hello.</h1>
        </div>
    </div>
</div>

CSS：

.video-container {
    position: relative;
    padding-top: 56.25%; /* this gives you responsive aspect ratio */
    overflow: hidden;
}

.hero-video {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    display:inline-block;
}


/* in this example we are "vertically-centering" the caption */
.hero-caption {
    position: absolute;
    display: inline-block;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    color: white;
    font: 0/0 a;
}

.hero-caption:before {
    content: ' ';
    display: inline-block;
    height: 100%;
    vertical-align: middle; 
}       


.hero-caption-inner {
    font: 16px/1 Helvetica; /* Reset the font property */
    display: inline-block;
    vertical-align: middle;
    text-align:left;
    width: 100%;
 }

Answer 2

你想把视频放在后台吗？您可以使用 z-index：-1; ，使div显示在后台。

的z-index：0;将出现在z-index：-1之上，依此类推

Answer 3

尝试拍摄＆lt; video＆gt;超出＆lt;部分＆gt;元件。所以整个＆lt;部分＆gt;可以在背景之上休息＆lt; video＆gt;。

在背景视频标签上显示div

3 个答案: