前端使用视频作为背景图的方法

实现思路

通过 video + source 引入视频,并对视频播放属性进行设置,再通过 css 使视频覆盖背景即可。

代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>有开发问题可联系作者</title>
</head>
<body><div class="login"><!--autoplay: 视频在就绪后马上播放loop: 循环播放muted: 静音播放source标签type属性支持的类型有: video/ogg,video/mp4,video/webm--><video class="video-background" autoplay="autoplay" loop="loop" muted="muted"><source src="../images/orange_animate.mp4" type="video/mp4" /></video></div>   
</body>
<style>.login{width: 100%;height: 100%;display:flex;align-items: center;
}.video-background {position: fixed;top: 0;left: 0;min-width: 100%;height: 100%;width: auto;object-fit: cover;}</style>
</html>

👇觉得有帮助的朋友可以支持下作者哦,您的鼓励是我创作的最大动力,如有开发问题可联系作者
请添加图片描述

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

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

相关文章

学习git后,真正在项目中如何使用?

文章目录 前言下载和安装Git克隆远程仓库PyCharm链接本地Git创建分支修改项目工程并提交到本地仓库推送到远程仓库小结 前言 网上学习git的教程&#xff0c;甚至还有很多可视化很好的git教程&#xff0c;入门git也不是什么难事。但我发现&#xff0c;当我真的要从网上克隆一个…

SQL事务的开启,提交和回滚

在处理数据库数据的时候会出现一种情况就是我们删除两个关联的表其中一个表的信息&#xff0c;另一个表也需要改动&#xff0c;但是我们SQL语句在同时更改两个表的同时&#xff0c;难免会出现一个表修改成功&#xff0c;另一个出现错误&#xff0c;这时候表与表之间就会出现矛盾…

webrtc网之sip转webrtc

OpenSIP是一个开源的SIP&#xff08;Session Initiation Protocol&#xff09;服务器&#xff0c;它提供了一个可扩展的基础架构&#xff0c;用于建立、终止和管理VoIP&#xff08;Voice over IP&#xff09;通信会话。SIP是一种通信协议&#xff0c;用于建立、修改和终止多媒体…

geolife 笔记:将所有轨迹放入一个DataFrame

单条轨迹的处理&#xff1a;geolife笔记&#xff1a;整理处理单条轨迹-CSDN博客 1 加载数据 import pandas as pd import numpy as np import datetime as dt import osdata_dir Geolife Trajectories 1.3/Data/ 1.1 列出所有文件夹 dirlist os.listdir(data_dir) dirlist…

Esxi登录超时:“由于不活动超时,您已被注销“,修改UserVars.HostClientSessionTimeout为0永不超时

Esxi登录超时:“由于不活动超时&#xff0c;您已被注销”,修改UserVars.HostClientSessionTimeout为0永不超时 UserVars.HostClientSessionTimeout0永不超时 Esxi网页登录后,一段时间不操作就会被注销 提示: 由于不活动超时&#xff0c;您已被注销 主机→管理→系统→高级设…

【linux】查看CPU和内存信息

之前咱们一起学习了查看内存的和CPU的命令。 ​mpstat &#xff1a; 【linux】 mpstat 使用 uptime&#xff1a;【Linux】 uptime命令使用 CPU的使用率&#xff1a;【linux】查看CPU的使用率 nmon &#xff1a;【linux】nmon 工具使用 htop &#xff1a;【linux】htop 命令…

文件格式对齐、自定义快捷键、idea

文件格式对齐 Shift Alt F 自动格式化代码的快捷键&#xff08;如何配置自动格式化&#xff09; 日常编码必备idea快捷键 [VS Code] 入门-自定键盘快捷键 文件格式对齐 文件格式对齐通常是通过编辑器或IDE提供的快捷键或命令完成的。以下是一些常见编辑器和IDE中进行文件…

快速认识什么是:Docker

Docker&#xff0c;一种可以将软件打包到容器中并在任何环境中可靠运行的工具。但什么是容器以及为什么需要容器呢&#xff1f;今天就来一起学快速入门一下Docker吧&#xff01;希望本文对您有所帮助。 假设您使用 Cobol 构建了一个在某种奇怪风格的 Linux 上运行的应用程序。您…

InnoDB Architecture MySQL 5.7 vs 8.0

innodb-architecture-5-7 innodb-architecture-8-0 图片均来源于MySQL官网

【Vue】props与$emit的简单理解

Vue组件 组件是Vue中不可或缺的一个功能&#xff0c;它可以将一个页面划分为多个独立的内部组件&#xff0c;方便代码的管理。 定义组件 <body><div id"App"><bcomp></bcomp></div><script>const app Vue.createApp({})cons…

【2023传智杯-新增场次】第六届传智杯程序设计挑战赛AB组-ABC题复盘解题分析详解【JavaPythonC++解题笔记】

本文仅为【2023传智杯-第二场】第六届传智杯程序设计挑战赛-题目解题分析详解的解题个人笔记,个人解题分析记录。 本文包含:第六届传智杯程序设计挑战赛题目、解题思路分析、解题代码、解题代码详解 文章目录 一.前言二.赛题题目A题题目-B题题目-C题题目-二.赛题题解A题题解-…

Servlet should have a mapping

第一种可能&#xff1a; 你就是没写Servlet <servlet><servlet-name>SpringMVC</servlet-name><servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class><!-- 配置springMVC需要加载的配置文件--><init-par…

Android studio生成二维码

1.遇到的问题 需要生成一个二维码&#xff0c;可以使用zxing第三方组件&#xff0c;增加依赖。 //生成二维码 implementation com.google.zxing:core:3.4.1 2.代码 展示页面 <ImageViewandroid:id"id/qrCodeImageView"android:layout_width"150dp"an…

【Linux】echo命令使用

​echo命令 功能是在显示器上显示一段文字&#xff0c;一般起到一个提示的作用。此外&#xff0c;也可以直接在文件中写入要写的内容。也可以用于脚本编程时显示某一个变量的值&#xff0c;或者直接输出指定的字符串。 ​ 著者 由布莱恩福克斯和切特拉米撰写。 语法 echo […

图像万物分割——Segment Anything算法解析与模型推理

一、概述 在视觉任务中&#xff0c;图像分割任务是一个很广泛的领域&#xff0c;应用于交互式分割&#xff0c;边缘检测&#xff0c;超像素化&#xff0c;感兴趣目标生成&#xff0c;前景分割&#xff0c;语义分割&#xff0c;实例分割&#xff0c;泛视分割等。 交互式分割&am…

设计模式之结构型模式(适配器、桥接、组合、享元、装饰者、外观、代理)

文章目录 一、结构型设计模式二、适配器模式三、桥接模式四、组合模式五、享元模式六、装饰者模式七、外观模式八、代理设计模式 一、结构型设计模式 这篇文章我们来讲解下结构型设计模式&#xff0c;结构型设计模式&#xff0c;主要处理类或对象的组合关系&#xff0c;为如何…

计算机设备管理器如何看内存,怎么查看电脑配置信息?3种方法,让你掌握电脑全部信息!...

转载&#xff1a;https://blog.csdn.net/weixin_35849957/article/details/118512756?spm1001.2014.3001.5502 原标题&#xff1a;怎么查看电脑配置信息&#xff1f;3种方法&#xff0c;让你掌握电脑全部信息&#xff01; 电脑的配置决定了电脑性能高低以及运行速度。而电脑…

Emacs之Plantuml用于复杂UML类图(Markdown用于简单类图)(一百三十二)

简介&#xff1a; CSDN博客专家&#xff0c;专注Android/Linux系统&#xff0c;分享多mic语音方案、音视频、编解码等技术&#xff0c;与大家一起成长&#xff01; 优质专栏&#xff1a;Audio工程师进阶系列【原创干货持续更新中……】&#x1f680; 优质专栏&#xff1a;多媒…

python主流开发工具排名,python开发工具有哪些

本篇文章给大家谈谈python的开发工具软件有哪些&#xff0c;以及python主流开发工具排名&#xff0c;希望对各位有所帮助&#xff0c;不要忘了收藏本站喔。 python中用到哪些软件 一、Python代码编辑器1、sublime Textsublime Text是一款非常流行的代码编辑器&#xff0c;支持P…

STM32L051使用HAL库操作实例(13)- 读取IAQ-CORE-C传感器实例

目录 一、前言 二、传感器参数 三、STM32CubeMX配置&#xff08;本文使用的STM32CubeMX版本为6.1.2&#xff09;例程使用模拟I2C进行数据读取 1.MCU选型 2.使能时钟 3.时钟配置 4.GPIO口配置 四、配置STM32CubeMX生成工程文件 五、点击GENERATE CODE生成工程文件 六、…