(vue)整个页面添加背景视频
【代码】(vue)整个页面添加背景视频。
·
(vue)整个页面添加背景视频

App.vue
<template>
<div id="app" :class="[platform]">
<video src="./assets/images/top/bg-video-711.mp4" autoplay muted loop class="bg"></video>
<router-view />
</div>
</template>
css
<style lang="less">
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
// text-align: center;
color: #2c3e50;
}
video.bg {
position: fixed;
/* 视频绝对定位 */
top: 0;
left: 0;
width: 100%;
/* 宽度占据整个屏幕 */
height: 100%;
/* 高度占据整个屏幕 */
object-fit: fill;
/* 填满整个容器,可能会裁剪视频 */
}
.bg {
width: 100%;
height: 100%;
}
...
</style>
魔乐社区(Modelers.cn) 是一个中立、公益的人工智能社区,提供人工智能工具、模型、数据的托管、展示与应用协同服务,为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作,由全产业链共同建设、共同运营、共同享有,推动国产AI生态繁荣发展。
更多推荐


所有评论(0)