如何解决Wordpress 中的视频背景全屏
我在一个网站 hobbinternational.com 上工作,我需要主页中的视频覆盖整个屏幕并且标题是透明的。我尝试了很多,但找不到解决方案。有人可以帮忙吗?
解决方法
将 position: fixed;
添加到 .page-header
对于其他人,这是背景中的视频示例
.bg-video-wrap {
position: relative;
overflow: hidden;
width: 100%;
height: 100vh;
background: url(https://designsupply-web.com/samplecontent/vender/codepen/20181014.png) no-repeat center center/cover;
}
video {
min-width: 100%;
min-height: 100vh;
z-index: 1;
}
.overlay {
width: 100%;
height: 100vh;
position: absolute;
top: 0;
left: 0;
background-image: linear-gradient(45deg,rgba(0,.3) 50%,.7) 50%);
background-size: 3px 3px;
z-index: 2;
}
h1 {
text-align: center;
color: #fff;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
z-index: 3;
max-width: 400px;
width: 100%;
height: 50px;
}
<div class="bg-video-wrap">
<video src="https://designsupply-web.com/samplecontent/vender/codepen/20181014.mp4" loop muted autoplay>
</video>
<div class="overlay">
</div>
<h1>Fullscreen video background
</h1>
</div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。