Question

以下示例我做错了什么？我正在尝试在div中创建一个视频循环，并在其上面显示文本。任何帮助表示赞赏。

CodePen：http://codepen.io/anon/pen/vEJPRO

HTML：

<div class="clouds">
<video width="600" height="200" autoplay="autoplay" loop="loop" preload>
<source src="http://www.eclarify.com/videos/background.mp4" type="video/mp4" >
<source src="http://www.eclarify.com/videos/background.ogg" type="http://leongaban.com/video/ogg" >
<source src="http://www.eclarify.com/videos/background.webm" type="video/webm" >
<object data="http://www.eclarify.com/videos/background.mp4" width="1920" height="1080">
<param name="wmode" value="transparent">
<param name="autoplay" value="true" >
<param name="loop" value="true" >
<embed src="http://www.eclarify.com/videos/background.swf" width="1920" height="1080" wmode="transparent" >
</object>
</video> 

<div class="content">
   <h1>Hello There</h1>
</div>

</div>

CSS：

body {
  margin:0;
  padding:0;

}

div.clouds {
    margin:0 auto;
    width:100%;
    height:200px;
    overflow: hidden;

}

div.content h1 {
  color: rgba(255, 255, 255, 0.8);
  font-size: 48px;
  line-height: 600px;
  font-weight: 700;
  text-align: center;
  text-transform: uppercase;
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  z-index:100;
}


div.clouds video, div.clouds object, div.clouds embed {
    /*width: 100%;*/
    width: 2000px;
    height: auto;
    min-width: 720px;
    margin: 0 auto;  
    z-index:-1500;
}

Answer 1

你去哥们

http://codepen.io/replicat0r/pen/ZYJPjM

当您需要将一个元素覆盖在另一个元素上时。您通常必须将第二个元素置于绝对位置，并将其相应地放置到您想要的位置。所以在这种情况下

div.content h1 {
  color: rgba(255, 255, 255, 0.8);
  font-size: 48px;
  line-height: 600px;
  font-weight: 700;
  text-align: center;
  text-transform: uppercase;
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  z-index:100;

  /* this will bring your content up */
  position:absolute;
  top:0;

}

文字没有显示在视频循环上

1 个答案: