文章/答案/技术大牛

发布

社区首页 >问答首页 >如何在全屏背景视频下显示内容

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

Stack Overflow用户

提问于 2017-05-02 12:40:32

回答 1查看 829关注 0票数 0

我正在设计一个登陆页面，其中我有一个背景视频在全屏，然后当用户滚动下来，有内容下面的视频。我已经设法让它工作，通过设置内容的最高利润率为100 it，但视频和内容之间有一个巨大的差距…

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;
}

它看起来就像自动取款机：

vid全屏显示为背景

向下滚动时可以看到内容，但有很大的差距，虽然利润率最高:100 is。

(谢谢您的帮助:)

我是一个css的新手，所以如果这是显而易见的话。

html

css

video

fullscreen

回答 1

Stack Overflow用户

回答已采纳

发布于 2017-05-02 15:18:56

因此，您的内容有一个巨大的差距以上的原因是，因为菜单是推低的100vh上边距。要修复它，您需要添加类似于以下CSS的内容：

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

一旦添加，您的内容应该是正常的。告诉我是怎么回事！

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/43738142

复制

相似问题

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

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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