我正在为我的网站使用Fullpage.js系统。 以下问题是，我似乎无法通过视频显示我的背景图片。
使用.layer类，可以通过视频获取文本。但它对背景图像并不起作用。 或者我似乎无法让它发挥作用。
我已经联系了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>
答案 0 :(得分：0)
以下是如何创建此效果 首先为您的视频创建一个容器（如果您已经拥有它），而不是使用它：
<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; */
}
然后像这样创建叠加图像/背景：
.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;
}
<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;
}
答案 1 :(得分：0)
这帮我感谢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>