(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>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/541.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

校园网WiFi IPv6免流上网

ipv6的介绍 IPv6是国际协议的最新版本&#xff0c;用它来取代IPv4主要是为了解决IPv4网络地址枯竭的问题&#xff0c;也在其他很多方面对IPv4有所改进&#xff0c;比如网络的速度和安全性。 IPv4是一个32位的地址&#xff0c;随着用户的增加在2011年国家报道说IPv4的网络地址即…

QT开发技巧之嵌入式linux QT的QCombobox显示空白的问题

1.问题 开发平台&#xff1a;imx6ull qt版本&#xff1a;5.12.9 在嵌入式linux上运行的qt&#xff0c;QCombobox显示空白&#xff0c;不能显示其中的文本内容 2.解决办法 选中QCombobox&#xff0c;在属性栏中将foucsPolicy由WheelFocus改成NoFocus就好了

Spring Boot集成ElasticsearchRepository

Spring Boot集成ElasticsearchRepository 在上文springboot操作elasticsearch(简易版&#xff09;中&#xff0c;我们使用了elasticsearchRestTemplate操作索引及数据&#xff0c;本文主要是介绍elasic媲美数据库连接框架hibernate的数仓ElasticsearchRepository 在本文中&…

scrapy ---分布式爬虫

导模块 pip install scrapy-redis 原来scrapy的Scheduler维护的是本机的任务队列&#xff08;待爬取的地址&#xff09;本机的去重队列&#xff08;放在集合中&#xff09;---》在本机内存中 如果把scrapy项目&#xff0c;部署到多台机器上&#xff0c;多台机器爬取的内容是重…

Win10电脑开机PIN码怎么取消?

有的用户稀里糊涂的设置了PIN码之后&#xff0c;在开机时发现多了个PIN码&#xff0c;但又不知道电脑PIN码是什么意思&#xff0c;也不清楚开机PIN码怎么取消。您可以通过阅读以下内容&#xff0c;以了解什么是PIN以及如何取消PIN码。 PIN码是一种快捷登录密码方式&#xff0c;…

云计算的学习(六)

六、云计算的发展趋势 1.云计算相关领域介绍 1.1物联网 物联网来源于互联网&#xff0c;是万物互联的结果&#xff0c;是人和物、物和物之间产生通信和交互。 物联网主要技术&#xff1a; RFID技术&#xff08;射频识别技术&#xff09;传感器技术嵌入式系统技术 1.2大数据…

OpenCV - 图片增加透明通道,图片合并透明通道

1 为图像增加透明通道 一般人像抠图相关的AI模型会输出一个Mask图&#xff0c;这个Mask图就是我们需要的可以将人物抠出来的Alpha通道信息&#xff0c;我们需要将这个Mask图附加到原始图片上&#xff0c;从BGR图片转成BGRA图片或者从RGB图片转成RGBA图片。 如果使用OpenCV进行…

Matplotlib.pyplot接口汇总

Matplotlib 中的 pyplot 模块是一个类似命令风格的函数集合&#xff0c;这使得 Matplotlib 的工作模式和 MATLAB 相似。 pyplot 模块提供了可以用来绘图的各种函数&#xff0c;比如创建一个画布&#xff0c;在画布中创建一个绘图区域&#xff0c;或是在绘图区域添加一些线、标签…

win系统电脑在线打开sketch文件的方法

自Sketch诞生以来&#xff0c;只有Mac版本。Windows计算机如何在线打开Sketch文件&#xff1f; 即时设计已经解决了你遇到的大部分问题&#xff0c;不占用内存也是免费的。 您可以使用此软件直接在线打开Sketch文件&#xff0c;完整预览并导出CSS、SVG、PNG等&#xff0c;还具…

【工具推荐】企业微信、企业飞书接口调用工具

github地址: GitHub - fasnow/idebug: 企业微信、企业飞书接口调用工具。 简介 企业微信、企业飞书接口调用工具。 使用方法 wechat模块 使用use wechat 选择模块。 首先设置corpid和corpsecret&#xff0c;如有需要可以设置代理&#xff0c;之后再执行run命令。 导出通信…

微信小程序设置底部导航栏

微信小程序设置底部导航栏 1、前言2、图标准备3、小程序tabbar设置 1、前言 我们先来看下效果图&#xff1a; 注意&#xff1a; 导航栏数量最多5个&#xff0c;最少两个。 2、图标准备 阿里图标库 http://www.iconfont.cn/collections/show/29 我们进入该网站&#xff0c;选…

在SpringBoot中对RabbitMQ三种使用方式

基于API的方式 1.使用AmqpAdmin定制消息发送组件 Autowiredprivate AmqpAdmin amqpAdmin;Testpublic void amqpAdmin(){//1.定义fanout类型的交换器amqpAdmin.declareExchange(new FanoutExchange("fanout_exchange"));//2.定义两个默认持久化队列,分别处理email和sm…

云事业群CTO线技术晋升考核机试题-分布式专题-F 分布式服务链路动态追踪

2023年&#xff08;Q3财年&#xff09;技术部门CTO线技术人员晋升考核机试题 分布式篇-F 分布式服务链路动态追踪 *参考答案* 出题人&#xff1a;湖北TL田超凡答案制定&#xff1a;湖北TL田超凡 *****试卷启用前绝密**** 1 分布式服务链路动态追踪产生的背景 答&#xff…

MySQL的约束类型、数据库操作、数据表操作大全(简述)

目录 一.数据库的操作语法 二.MySQL数据库约束 三.数据类型 四.数据表操作 作者简介&#xff1a; tq02&#xff0c;一个想成为编程高手的梦中人作者主页&#xff1a; tq02的博客_CSDN博客-C语言,Java,Java数据结构领域博主学习专栏&#xff1a; &#x1f3a5; MySQL基础 …

Python 列表 insert()函数使用详解

「作者主页」&#xff1a;士别三日wyx 「作者简介」&#xff1a;CSDN top100、阿里云博客专家、华为云享专家、网络安全领域优质创作者 「推荐专栏」&#xff1a;小白零基础《Python入门到精通》 insert函数使用详解 1、插入的位置1.1、正数索引1.2、负数索引 2、插入对象 ins…

macOS 怎么安装redis数据库

1 访问redis数据库下载网址 http://download.redis.io/releases/ 访问上述的redis下载的网址&#xff0c;确定你想要的版本 然后下载即可 &#xff08;我选则的是6.2.6&#xff09; 然后下载 下载后 把这个文件解压&#xff0c;放在自己想要放在的位置 2 打开终端 输入对应的…

MyBatis查询数据库(1)

前言&#x1f36d; ❤️❤️❤️SSM专栏更新中&#xff0c;各位大佬觉得写得不错&#xff0c;支持一下&#xff0c;感谢了&#xff01;❤️❤️❤️ Spring Spring MVC MyBatis_冷兮雪的博客-CSDN博客 经过前⾯的学习咱们 Spring 系列的基本操作已经实现的差不多了&#xff0…

论文浅尝 | 少样本学习的语言模型的持续训练

笔记整理&#xff1a;王贵涛&#xff0c;东南大学硕士&#xff0c;研究方向为自然语言处理 链接&#xff1a;https://github.com/UIC-Liu-Lab/CPT 一、动机 克服灾难性遗忘&#xff08;CF&#xff09;是持续学习&#xff08;CL&#xff09;的一个主要目标。目前有许多方法&…

物流企业「营销服」数字化转型,看这篇文章就够了

物流和供应链企业不仅和生产环节紧密相连&#xff0c;还与消费者需求息息相关&#xff0c;通过高度整合和融合运输、仓储、分拨、配送、信息等服务功能&#xff0c;为延伸产业链、提升价值链、构建供应链提供了关键支持。物流企业在推进现代流通体系、促进国内市场强大发展、推…

Linux —— 进程介绍

目录 一&#xff0c;进程介绍 二&#xff0c;进程使用 进程查看 通过系统调用获取进程标识符 通过系统调用创建进程 fork 一&#xff0c;进程介绍 进程是正在执行的程序或命令&#xff0c;每个进程都是一个运行的实体或程序的执行实例&#xff0c;有自己的地址空间&#x…