VUE页面背景设置为视频
VUE页面背景设置为视频
前言
VUE页面背景设置为视频
一、div部分
视频文件放置位置如下图所示
代码如下所示
<div class="videoContainer">
<video class="fullscreenVideo" id="bgVid" playsinline="" autoplay="" muted="" loop="">
<source src="../assets/video/spa.mp4" type="video/mp4">
</video>
</div>
二、CSS代码
CSS代码位置如下图所示
CSS代码如下所示
.videoContainer{
position: fixed;
width: 100%;
height: 100%;
overflow: hidden;
z-index: -100;
}
.videoContainer:before{
content: "";
position: absolute;
width: 100%;
height: 100%;
display: block;
z-index: -1;
top: 0;
left: 0;
background: rgba(25,29,34,.65);
}
三、效果展示
文章来源：https://www.toymoban.com/news/detail-512264.html
总结
以上就是VUE页面背景设置为视频的全部信息、感兴趣的话点一个关注，我会不定期的更新技术分享，你的鼓励是我创作的动力。文章来源地址https://www.toymoban.com/news/detail-512264.html
到了这里，关于VUE页面背景设置为视频的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
