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

实现思路

通过 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.rhkb.cn/news/213194.html

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

相关文章

Amazon CodeWhisperer 提供新的人工智能驱动型代码修复、IaC 支持以及与 Visual Studio 的集成...

Amazon CodeWhisperer 的人工智能&#xff08;AI&#xff09;驱动型代码修复和基础设施即代码&#xff08;IaC&#xff09;支持已正式推出。Amazon CodeWhisperer 是一款用于 IDE 和命令行的人工智能驱动型生产力工具&#xff0c;现已在 Visual Studio 中推出&#xff0c;提供预…

VUE+webrtc-streamer 实现实时视频播放(监控设备-rtsp)

效果 下图则启动成功&#xff0c;此时在浏览器访问127.0.0.1:8000可以看到本机监控画面 1、下载webrtc-streamer 地址&#xff1a;https://github.com/mpromonet/webrtc-streamer/releases 2、解压下载包 3、双击webrtc-streamer.exe启动服务 4、将下载包html文件夹下webrt…

使用pytorch查看中间层特征矩阵以及卷积核参数

这篇是我对哔哩哔哩up主 霹雳吧啦Wz 的视频的文字版学习笔记 感谢他对知识的分享 1和4是之前讲过的alexnet和resnet模型 2是分析中间层特征矩阵的脚本 3是查看卷积核参数的脚本 1设置预处理方法 和图像训练的时候用的预处理方法保持一致 2实例化模型 3载入之前的模型参数 4载入…

pyside/qt03——人机协同的编程教学—直接面向chatGPT实战开发(做中学,事上练)

先大概有个草图框架&#xff0c;一点点丰富 我纠结好久&#xff0c;直接用Python写UI代码 还是用designer做UI 再转Python呢&#xff0c; 因为不管怎么样都要转成Python代码&#xff0c; 想了想还是学一下designer吧&#xff0c;有个中介&#xff0c;有直观理解。 直接这样也可…

Python---random库

目录 基本随机数函数(): rand.seed() random() 扩展随机数函数(): random库包含两类函数&#xff1a;基本随机数函数&#xff0c;扩展随机数函数 基本随机数函数:seed(),random() 扩展随机数函数&#xff1a;randint,getrandbits(),uniform(),randrange(),choice(),shuff…

使用git push太慢怎么办

使用git push太慢怎么办 修改host文件&#xff1a; windows 的路径应该在 C:\Windows\System32\drivers\etc\hosts 在host文件的最后一行加上 151.101.72.249 github.global.ssl.fastly.nethost不允许修改就复制一份&#xff0c;修改好了再替换掉&#xff0c;可能会让你输入…

React中使用react-json-view展示JSON数据

文章目录 一、前言1.1、在线demo1.2、Github仓库 二、实践2.1、安装react-json-view2.2、组件封装2.3、效果2.4、参数详解2.4.1、src(必须) &#xff1a;JSON Object2.4.2、name&#xff1a;string或false2.4.3、theme&#xff1a;string2.4.4、style&#xff1a;object2.4.5、…

3DCAT+上汽奥迪:打造新零售汽车配置器实时云渲染解决方案

在 5G、云计算等技术飞速发展的加持下&#xff0c;云渲染技术迎来了突飞猛进的发展。在这样的背景下&#xff0c;3DCAT应运而生&#xff0c;成为了业内知名的实时云渲染服务商之一。 交互式3D实时云看车作为云渲染技术的一种使用场景&#xff0c;也逐步成为一种新的看车方式&a…

c语言实现栈

前言 本文章主要介绍用c语言实现栈&#xff0c;包括栈的各个接口比如STInit&#xff0c;STpush&#xff0c;STpop等等 一.栈的概念及结构 栈&#xff1a;一种特殊的线性表&#xff0c;其只允许在固定一端进行插入和删除元素操作。进行数据插入和删除操作的一端称为栈顶。另一端…

华为配置Smart Link主备备份示例

定义 Smart Link&#xff0c;又叫做备份链路。一个Smart Link由两个接口组成&#xff0c;其中一个接口作为另一个的备份。Smart Link常用于双上行组网&#xff0c;提供可靠高效的备份和快速的切换机制。 Monitor Link是一种接口联动方案&#xff0c;它通过监控设备的上行接口…

1、关于前端js-ajax绕过

1、Ajax知识 、js--Ajax 传统请求跟js--Ajax请求的差别 在实例中用的上js-ajax的有 表单验证&#xff1a; 在用户填写表单时&#xff0c;可以使用 Ajax 在不刷新页面的情况下验证表单字段&#xff0c;并提供即时反馈。 实时搜索&#xff1a; 在搜索框中输入内容时&#xff0…

Vue3使用Tailwind CSS

安装 Tailwind 以及其它依赖项 npm install -D tailwindcsslatest postcsslatest autoprefixerlatest生成配置文件&#xff1a; npx tailwindcss init -p.修改配置文件 tailwind.config.js 2.6版本 &#xff1a; module.exports {purge: [./index.html, ./src/**/*.{vue,j…

javaEE -14(10000字 JavaScript入门 - 1)

一&#xff1a;初始 JavaScript JavaScript (简称 JS)是世界上最流行的编程语言之一&#xff0c;它是一个脚本语言, 通过解释器运&#xff0c;主要在客户端(浏览器)上运行, 现在也可以基于 node.js 在服务器端运行. JavaScript 和 HTML 和 CSS 之间的关系&#xff1a; HTML…

溯源取证-WEB流量分析-简单

话不多说直接干&#xff1a; 题干&#xff1a; 开发团队在公司的一个 Web 服务器上发现了异常文件&#xff0c;开发团队怀疑该服务器上存在潜在的恶意活动&#xff0c;网络团队准备了一个包含关键网络流量的 pcap 文件&#xff0c;供安全团队分析&#xff0c;而你的任务是分析…

通过静态HTTP实现负载均衡

在当今的互联网环境中&#xff0c;随着用户数量的不断增加和业务需求的不断扩大&#xff0c;单台服务器往往无法承受所有的访问压力。为了确保网站的可用性和性能&#xff0c;负载均衡成为了一种常见的解决方案。本文将探讨如何通过静态HTTP实现负载均衡&#xff0c;以提升网站…

力扣题:公共前缀/单词-11.18

力扣题-11.18 [力扣刷题攻略] Re&#xff1a;从零开始的力扣刷题生活 力扣题1&#xff1a;14.最长公共前缀 解题思想&#xff1a;先找到最小的字符串长度&#xff0c;然后进行字符串的遍历即可 class Solution(object):def longestCommonPrefix(self, strs):""&qu…

腾讯云CentOS8 jenkins war安装jenkins步骤文档

腾讯云CentOS8 jenkins war安装jenkins步骤文档 一、安装jdk 1.1 上传jdk-11.0.20_linux-x64_bin.tar.gz 1.2 解压jdk安装包文件 tar -zxvf jdk*.tar.gz 1.3 在/usr/local 目录下创建java目录 cd /usr/local mkdir java 1.4 切到java目录&#xff0c;把jdk解压文件改名为jd…

枚举类的final修饰

今天开发跟我反馈了一个很奇怪的问题&#xff0c;说有个对象的状态属性是枚举类&#xff0c;设置了该对象的状态后&#xff0c;插入数据库&#xff0c;这个状态没了&#xff0c;凭空消失了&#xff0c;变成了空白字符串。这让人感觉非常奇怪&#xff0c;整个问题排查后得到的结…

数据分析基础之《matplotlib(5)—直方图》

一、直方图介绍 1、什么是直方图 直方图&#xff0c;形状类似柱状图却有着与柱状图完全不同的含义。直方图牵涉统计学的概念&#xff0c;首先要对数据进行分组&#xff0c;然后统计每个分组内数据元的数量。在坐标系中&#xff0c;横轴标出每个组的端点&#xff0c;纵轴表示频…

持续集成交付CICD:使用Maven命令下载Nexus制品

目录 一、实验 1.Maven安装 2.Nexus搭建公共组仓库及Maven全局配置文件 3.使用Maven命令下载Nexus制品 一、实验 1.Maven安装 &#xff08;1&#xff09;CentOS环境安装步骤 tar -xf apache-maven-3.8.6-bin.tar.gz #解压 mv apache-maven-3.8.6 /usr/local/maven #移动…