VUE頁面背景設(shè)置為視頻
VUE頁面背景設(shè)置為視頻
前言
VUE頁面背景設(shè)置為視頻
一、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);
}
三、效果展示
文章來源：http://www.zghlxwxcb.cn/news/detail-512264.html
總結(jié)
以上就是VUE頁面背景設(shè)置為視頻的全部信息、感興趣的話點(diǎn)一個(gè)關(guān)注，我會(huì)不定期的更新技術(shù)分享，你的鼓勵(lì)是我創(chuàng)作的動(dòng)力。文章來源地址http://www.zghlxwxcb.cn/news/detail-512264.html
到了這里，關(guān)于VUE頁面背景設(shè)置為視頻的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
