Question

我正在设计一个着陆页，我在其中全屏显示背景视频，然后当用户向下滚动时，视频下方有内容。我设法通过将内容设置为100vh的最高边距来实现它的工作，但视频和内容之间存在巨大差距...

HTML

  <body>
  <div class="bgvid-back">
  <video class="bgvid" poster="media/skyline.jpg" autoplay="true" loop muted width="100%">
      <source src="media/BnW.webm" type="video/webm">
      <source src="media/BnW.mp4" type="video/mp4">      
  </video>
  </div> 
  <ul class="menu">
        <li>
            <a href="#" class="navburger" data-toggle="offCanvasLeft">
                <div class="one"></div>
                <div class="two"></div>
                <div class="three"></div>
            </a>
        </li>
        <li><a href="#" class="logo"><img src="media/rsz_lucidity-logo.png"></a></li>
    </ul>
  <p class="content"> lorum ipsum </p>
  </body>

CSS

.bgvid-back {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow: hidden;
z-index: -100;
} 

.bgvid {
position: absolute;
top: 50%;
left: 50%;
width: auto;
height: auto;
min-width: 100%;
min-height: 100%;
-webkit-transform: translate(-50%, -50%);
   -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);

}

@media (max-width: 767px) {
.bgvid-back {
    background: url("media/skyline.jpg") center center / cover no-repeat;
}

.fullscreen-bg__video {
    display: none;
}
}
.content {
background-color: #313638;
margin: 100vh 0 0 0;
width: 100vh;
}

这就像atm：

vid shows in fullscreen as background

when scrolled down can see content but there is a large gap although margin-top: 100vh

提前感谢任何帮助:)

如果这很明显，我会对css这样的app app有点新手。

Answer 1

因此，您的内容与其相比存在巨大差距的原因是因为菜单正在推动100vh上限。要修复它，您将要添加类似以下CSS的内容：

ul.menu {
  position: absolute;
  top: 0;
}

添加后，您的内容应该正常。让我知道它是怎么回事！

如何在全屏背景视频下显示内容

1 个答案: