Tip：<video>標簽默認不是鋪滿的，手動設置寬高100%也不會生效，當需要video鋪滿div時，加上一個css樣式
object-fit: fill
object-fit 屬性指定元素的內容應該如何去適應指定容器的高度與寬度。
object-fit 一般用于 img 和 video 標簽，一般可以對這些元素進行保留原始比例的剪切、縮放或者直接進行拉伸等。文章來源：http://www.zghlxwxcb.cn/news/detail-509753.html
fill: 默認，不保證保持原有的比例，內容拉伸填充整個內容容器。文章來源地址http://www.zghlxwxcb.cn/news/detail-509753.html
<template>
<div class="box">
<!-- autoplay 自動播放 loop循環(huán)播放 muted 聲音 preload 預加載 -->
<video autoplay loop muted preload
? ? style="width: 100%; height: 100%; object-fit: fill">
<source src="/images/bjsp.mp4">
</video>
</div>
</template><style scoped >
* {
margin: 0;
padding: 0;
}
.box {
width: 100%;
height:calc(100vh - 40px);
background-color: rgb(141, 130, 130);
position: relative;
}
video {
height: calc(100vh - 40px);
background-size:100% 100%;
width: 100%;
position: absolute;
filter: blur(3px);
top: 0;
left: 0;
}到了這里，關于vue3中【html+css】背景設置為視頻并鋪滿整個頁面的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網！
