Javascript 整版JS固定背景图像_Javascript_Jquery_Html_Css_Fullpage.js

Javascript 整版JS固定背景图像

javascript jquery html css

Javascript 整版JS固定背景图像,javascript,jquery,html,css,fullpage.js,Javascript,Jquery,Html,Css,Fullpage.js,我正在使用FullPage JS，并希望实现一个固定的视频背景和滚动内容。我有视频设置为第1节，但当滚动它转移到一个白色的背景。帮个忙就好了 #fullpage { background-attachment: fixed; background-repeat: no-repeat; } <div id="fullpage"> <video autoplay loop muted id="myVideo"> <source

我正在使用FullPage JS，并希望实现一个固定的视频背景和滚动内容。我有视频设置为第1节，但当滚动它转移到一个白色的背景。帮个忙就好了

#fullpage {
  background-attachment: fixed;
  background-repeat: no-repeat;
}

<div id="fullpage">
     <video autoplay loop muted id="myVideo">
            <source src="video/empty.mp4" type="video/mp4">
            <source src="video/empty.webm" type="video/webm">
      </video>
</div>





#myVideo{
        position: fixed;
        right: 0;
        bottom: 0;
        top:0;
        right:0;
        width: 100%;
        height: 100%;
        background-size: 100% 100%;
        background-color: black; 
        background-image: /* our video */;
        background-position: center ;
        background-size: cover;
        object-fit: cover; 
        z-index: -1;
        overflow: hidden
}

#整页{
背景附件：固定；
背景重复：无重复；
}
#我的视频{
位置：固定；
右：0；
底部：0；
排名：0；
右：0；
宽度：100%；
身高：100%；
背景大小：100%100%；
背景色：黑色；
背景图像：/*我们的视频*/；
背景位置：中心；
背景尺寸：封面；
对象匹配：覆盖；
z指数：-1；
溢出：隐藏
}

你为什么把它弄得这么复杂？查看这个简单的视频背景教程。

下面的CSS代码片段将为您完成这项工作

video {
  margin: 0;
  padding: 0;
}
.content {
  position: relative;
  z-index: 2;
}
.video {
  position: fixed;
  z-index: 1;
}

对应的HTML部分

<body>
 <video id="my-video" class="video">
   <source src="media/demo.mp4" type="video/mp4">
   <source src="media/demo.ogv" type="video/ogg">
   <source src="media/demo.webm" type="video/webm">
 </video>
</body>

你看过你的链接了吗？在其中，您可以看到全屏视频元素需要更多属性。

.video{位置：固定；顶部：50%；左侧：50%；z索引：1；最小宽度：100%；最小高度：100%；宽度：自动；高度：自动；变换：平移（-50%，-50%）；}

在我看来，他的问题与固定视频和fullpage.js使用的

translate3d

属性有关。