Fullpage.js

Question

我正在为我的站点使用 Fullpage.js 系统。以下问题是我似乎无法让我的背景图片覆盖视频显示。

使用 .layer class 可以在视频上添加文字。但它不适用于背景图像。或者我似乎无法让它工作。

我已经联系了 fullpage.js github 他们说这是 CSS 相关时期。

代码：

<script type="text/javascript">
  $(document).ready(function() {
   $('#fullpage').fullpage({
    anchors: ['firstPage', 'secondPage', '3rdPage', '4thpage', '5thpage'],
    sectionsColor: ['#C63D0F', '#1BBC9B', '#7E8F7C', '#1BBC9B', '#C63D0F'  ],
    verticalCentered: true,
    css3: true,
    afterRender: function(){


     //playing the video
     $('video').get(0).play();
    }
    
   });
  });
 </script>

#myVideo{
  position: absolute;
  right: 0;
  bottom: 0;
  top:0;
  right:0;
  width: 100%;
  height: 100%;
  background-size: 100% 100%;
   background-color: black; /* in case the video doesn't fit the whole page*/
    background-image: /* our video */;
    background-position: center center;
    background-size: contain;
     object-fit: cover; /*cover video background */
     z-index:1;
 }
  #layer2{
  background-image:url(imgs/TOHA.svg);
  background-repeat: no-repeat;
     background-attachment:fixed;
  background-size:cover;
     background-position:center;
  background-size:;
  z-index:9999;
 
 }

/* Layer with position absolute in order to have it over the video
 * --------------------------------------- */
 #section0 .layer{
  
  position: absolute;
  z-index: 4;
  width: 100%;
  left: 0;
  top: 43%;
  
 }

 /*solves problem with overflowing video in Mac with Chrome */
 #section0{
  overflow: hidden;
 }

<div class="section " id="section0">
    <div class="layer2"></div>
    <div class="layer">
   <h1>Fixed elements</h1>
   <p>Create your own headers and footers</p>
  </div>
    
     <video autoplay loop muted controls id="myVideo">
   <source src="imgs/flowers.mp4" type="video/mp4">
   <source src="imgs/flowers.webm" type="video/webm">
  </video>
  
 </div>

Answer 1

创建此效果的方法如下。
首先为您的视频创建一个容器，如果您已经拥有它，请使用它：

<div class="videoContainer">... Content will go here ...</div>

然后像这样设置您的 .videoContainer 样式，例如：

.videoContainer{
    width:80%; /* This will be the size of your background, let's say it's 80% */
    height:200px; /* This is size too */
    position: relative; /* This will be necessary to contain the image that will be created next to avoid it to go outside the .videoContainer because of its position:absolute; */
}

然后像这样创建叠加层 image/background：

.bgOverlay{
    background:url('https://shechive.files.wordpress.com/2012/06/a-mc-random-12.jpg');
    width:100%;
    height:100%;
    position: absolute;
    top: 0;
    opacity: 0.5;
}

全部应该看起来像这样：

Online Example Here

<div class="videoContainer">
    <iframe width="100%" height="200" src="https://www.youtube.com/embed/0y-yhCav8Zw?autoplay=1" frameborder="0" allowfullscreen></iframe>
    <div class="bgOverlay"></div>
</div>

和 CSS:

.videoContainer{
    width:80%;
    height:200px;
    position: relative;
}

.bgOverlay{
    background:url('https://shechive.files.wordpress.com/2012/06/a-mc-random-12.jpg');
    width:100%;
    height:100%;
    position: absolute;
    top: 0;
    opacity: 0.5;
}

Answer 2

这让我感谢 Chun 的帮助。

<script type="text/javascript">
  $(document).ready(function() {
   $('#fullpage').fullpage({
    anchors: ['firstpage', 'secondPage', '3rdPage', '4thpage', '5thpage'],
    sectionsColor: [ '#1BBC9B', '#7E8F7C', '#1BBC9B', '#C63D0F'  ],
    verticalCentered: true,
    css3: true,
    afterRender: function(){


     //playing the video
     $('video').get(0).play();
    }
    
   });
  });
</script>

.videoContainer{
  position:absolute;
  right: 0;
  bottom: 0;
  top:0;
  right:0;
  width:100%;
  height:100%;
  background-size:100% 100%;
  background-size:contain;
  background-position:center center;
  object-fit:cover;
  z-index:50;

 
}
 .bgOverlay{
     background:url('https://shechive.files.wordpress.com/2012/06/a-mc-random-12.jpg');
     position:fixed;
  background-repeat:no-repeat;
  background-size:35% 35%;
  background-position:center bottom 90px;
     top: 0;
  left:0;
  right:0;
  bottom:0;
  z-index:100;
}
    #section0 .layer{
  
  position: absolute;
  z-index: 1000;
  width: 100%;
  left: 0;
  top: 43%;
  
 }

      <div class="section" id="section0">
   <div class="videoContainer">
         <video autoplay loop muted class="videoContainer">
          <source src="https://www.youtube.com/embed/0y-yhCav8Zw?autoplay=1" type="video/mp4">
    <source src="https://www.youtube.com/embed/0y-yhCav8Zw?autoplay=1" type="video/webm">
                
         </video>
         
     </div>
  <div class="layer">
   <h1>TOHA</h1>
   
  </div>
        <div class="bgOverlay"></div>
        </div>

Fullpage.js - 同一部分的视频 + 背景

Fullpage.js - Video + Background in same section

javascript

jquery

html

css

全部应该看起来像这样：