Question

我公司正在使用Wordpress;我找到了一些有用的代码，可以将视频作为背景，我们很高兴它在我们的网络浏览器上加载的速度有多快。不幸的是，这个背景显示在页脚顶部，因此页脚不再可见。我已经用两种方式插入了html代码：1。在Visual Composer中使用“raw html”字段，2。通过Wordpress文本编辑器插入html代码。正如我所提到的，代码运行良好，但它涵盖了页脚。以下是页面的位置：http://gathereducation.com/homepage-html-5-video/。

这是html，CSS和JS：

HTML：

<video autoplay loop poster="/wp-content/uploads/2015/03/student_pov.jpg" id="bgvid">
<source src="/wp-content/uploads/2015/03/HomepageBannerNewClass.webm" type="video/webm">
<source src="/wp-content/uploads/2015/03/HomepageBannerNewClass.mp4" type="video/mp4">
</video>

CSS：

video { display: block; }

video#bgvid {
position: fixed;
top: 50%;
left: 50%;
min-width: 100%; min-height: 100%;
width: auto; height: auto; 
z-index: -100;
background: url(/wp-content/uploads/2015/02/student_pov.jpg) no-repeat;
background-size: cover;
transform: translateX(-50%) translateY(-50%);
}

@media screen and (max-device-width: 800px) {
.content { background: url(http://gathereducation.info/wp-content/uploads/2015/02/student_pov.jpg) #000 no-repeat center center fixed; }
#bgvid { display: none; }
}

RAW JS：

<!--[if lt IE 9]>
<script>
document.createElement('video');
</script>
<![endif]-->

有谁知道如何解决这个问题？我想我已经了解导致问题的原因，但是我无法找出将页脚显示在背景下方的最佳方法 - 而不是在它下面。

谢谢！

Answer 1

只需在页脚中添加z-index。

footer {
  z-index: 100;
}

像Chrome中的魅力一样。

通过CSS的视频背景涵盖了Wordpress上的页脚

1 个答案: