전체 화면 배경 비디오 아래에 콘텐츠를 표시하는 방법

전체 화면으로 배경 비디오가있는 방문 페이지를 디자인하고 있는데 사용자가 아래로 스크롤하면 비디오 아래에 콘텐츠가 표시됩니다. 나는 종류의 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>

vid shows in fullscreen as background

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

이는 기압 모습입니다 어떤 도움 :)

메신저이 명백한 경우 appologies 그래서 CSS에 초보자의 비트에 미리개

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

감사합니다.

출처

2017-05-02 theo

1. 이미지가 작동하지 않습니다. 여기에 직접 업로드하십시오. 2. 당신의 HTML에는'.content' div가 없습니다. 문제가있는 작업 스 니펫을 만드십시오. (편집자에서 '<>'기호가있는 버튼이 있습니다. –

@MihaiT 죄송합니다. 해당 div도 변경했음을 잊어 버렸습니다. 업로드 한 이미지도 더 좋습니까? – theo

메뉴도 있습니다. 그리고 그것은'.menu'에서 시작되고'body'가 아닌 마침표로'.content'를 밀어 낼 가능성이 높습니다. –

그래서 콘텐츠 상단에 큰 차이가있는 이유는 메뉴가 100vh 위쪽 여백을 내리고 있기 때문입니다. 이 문제를 해결하려면 다음 CSS와 같은 것을 추가 할 것입니다.

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

일단 추가되면 내용이 정상적으로 작동해야합니다. 어떻게 진행되는지 알려주세요!

출처

2017-05-02 15:18:56

이것은 내가 필요한 것입니다. 덕분에 너무 많이 고맙습니다! – theo

아무런 문제가 없습니다! –

전체 화면 배경 비디오 아래에 콘텐츠를 표시하는 방법

답변

관련 문제