VUE页面背景设置为视频

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);
}

三、效果展示

---

总结

以上就是VUE页面背景设置为视频的全部信息、感兴趣的话点一个关注，我会不定期的更新技术分享，你的鼓励是我创作的动力。