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

实现思路

通过 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>

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

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

小白学java栈的经典算法问题——第四关白银挑战

内容1.括号匹配问题2.最小栈3.最大栈 1.括号匹配问题 栈的典型题目还是非常明显的&#xff0c;括号匹配、表达式计算等等几乎都少不了栈&#xff0c;本小节我们就看两个最经典的问题 首先是LeetCode20,链接 本道题还是比较简单的&#xff0c;其中比较麻烦的是如何判断两个符…

LeetCode刷题--- 求根节点到叶节点数字之和

个人主页&#xff1a;元清加油_【C】,【C语言】,【数据结构与算法】-CSDN博客 个人专栏&#xff1a;http://t.csdnimg.cn/ZxuNL http://t.csdnimg.cn/c9twt 前言&#xff1a;这个专栏主要讲述递归递归、搜索与回溯算法&#xff0c;所以下面题目主要也是这些算法做的 我讲述…

正则表达式:字符串处理的瑞士军刀

&#x1f90d; 前端开发工程师&#xff08;主业&#xff09;、技术博主&#xff08;副业&#xff09;、已过CET6 &#x1f368; 阿珊和她的猫_CSDN个人主页 &#x1f560; 牛客高级专题作者、在牛客打造高质量专栏《前端面试必备》 &#x1f35a; 蓝桥云课签约作者、已在蓝桥云…

C++ Qt开发:字符串QString容器

在Qt框架中&#xff0c;QString 是一个强大而灵活的字符串容器&#xff0c;专为处理 Unicode 字符而设计。它提供了许多方便的方法来操作和处理字符串&#xff0c;使得在跨平台开发中能够轻松地进行文本操作。QString 是 Qt 开发中不可或缺的一部分&#xff0c;它的灵活性和强大…

Java9及之后关于类加载器的新特性

为了保证兼容性&#xff0c;JDK9没有从根本上改变三层类加载器的架构和双亲委派模型&#xff0c;但为了模块化系统的顺利运行&#xff0c;仍然发生了一些值得被注意的变动。 一、变动1 由于引入了模块化概念&#xff0c;所以不同的类加载器回去加载属于不同模块的类 启动类加…

打工人副业变现秘籍,某多/某手变现底层引擎-Stable Diffusion简介

Stable Diffusion是2022年发布的深度学习文本到图像生成模型,它主要用于根据文本的描述产生详细图像,尽管它也可以应用于其他任务,如

使用Android Studio导入Android源码:基于全志H713 AOSP,方便解决编译、编码问题

文章目录 一、 篇头二、 操作步骤2.1 编译AOSP AS工程文件2.2 将AOSP导入Android Studio2.3 切到Project试图2.4 等待index结束2.5 下载缺失的JDK 1.82.6 导入完成 三、 导入AS的好处3.1 本文案例演示源码编译错误AS对比同文件其余地方的调用AS错误提示依赖AS做错误修正 一、 篇…

字符串函数strtok

1.调用格式&#xff1a; 2.调用形式&#xff1a;char*strtok(char*p1,const char*p2),其中第二个是由分隔符组成的字符串&#xff0c;第一个为需要分隔的字符串 3.调用目的&#xff1a;将分隔符之间的字符串取出 4.调用时一般将源字符串拷贝后调用&#xff0c;因为此函数会将…

键盘打字盲打练习系列之循序渐进——4

一.欢迎来到我的酒馆 盲打&#xff0c;循序渐进&#xff01; 目录 一.欢迎来到我的酒馆二.继续练习二.矫正坐姿 二.继续练习 前面的章节&#xff0c;我们重点向大家介绍了主键盘区指法和键盘键位。经过一个系列的教程学习&#xff0c;相信大家对盲打这项技能已经掌握得差不多了…

金融量化交易:使用Python实现遗传算法

大家好&#xff0c;遗传算法是一种受自然选择过程启发的进化算法&#xff0c;用于寻找优化和搜索问题的近似解决方案。本文将使用Python来实现一个用于优化简单交易策略的遗传算法。 1.遗传算法简介 遗传算法是一类基于自然选择和遗传学原理的优化算法&#xff0c;其特别适用…

数据分析实例:基于电力大数据的中小型企业运营发展分析

前不久&#xff0c;帆软发起了【2023BI数据分析大赛】的活动&#xff0c;老李我也是这个大赛的评委。   今天跟大家分享的是基于电力大数据的中小型企业运营发展分析。 当我们去解读一份数据分析报告时&#xff0c;首先要了解这份报告的主要目的是什么&#xff0c;作者通过分…

mapbox使用v3版本,v2的样式切换不同时间段

创建DayAndNight.js /*** 使用方式* const dayNight new DayAndNight({ map: map // map 地图对象}) * 修改类型* dayNight.setConfigProperty(value)*/ class DayAndNight {constructor (sdMap) {this.map sdMap.mapthis.initStyle()}// 初始化时添加必要样式initStyle () {…

vue中设置滚动条的样式

在vue项目中&#xff0c;想要设置如下图中所示滚动条的样式&#xff0c;可以采用如下方式&#xff1a; ​// 直接写在vue.app文件中 ::-webkit-scrollbar {width: 3px;height: 3px; } ::-webkit-scrollbar-thumb { //滑块部分// border-radius: 5px;background-color: #1890ff;…

excel数据重复率怎么计算【保姆教程】

大家好&#xff0c;今天来聊聊excel数据重复率怎么计算&#xff0c;希望能给大家提供一点参考。 以下是针对论文重复率高的情况&#xff0c;提供一些修改建议和技巧&#xff1a; excel数据重复率怎么计算 在Excel中计算数据重复率可以通过以下步骤实现&#xff1a; 1. 确定重复…

Java并发编程-synchronized、volatile、AQS解析

Java并发编程 synchronized 如何保证线程安全 JDK1.6 之前&#xff0c;synchronized 是一个重量级锁相比于JUC的锁显得非常笨重&#xff0c;存在性能问题 JDK1.6 及之后&#xff0c;Java 对 synchronized 进行的了一系列优化&#xff0c;性能与 JUC 的锁不相上下 synchroni…

python源码,在线读取传奇列表,并解析为需要的JSON格式

python源码&#xff0c;在线读取传奇列表&#xff0c;并解析为需要的JSON格式 [Server] ; 使用“/”字符分开颜色&#xff0c;也可以不使用颜色&#xff0c;支持以前的旧格式&#xff0c;只有标题和服务器标题支持颜色 ; 标题/颜色代码(0-255)|服务器标题/颜色代码(0-255)|服务…

WPF使用WebBrowser页面白屏,不显示渲染页面问题排查

前言 WPF使用WebBrowser页面白屏&#xff0c;不显示渲染页面问题排查 代码 <Window x:Class"WpfApp1.Window5"xmlns"http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x"http://schemas.microsoft.com/winfx/2006/xaml"x…

Kubernetes入门笔记 ——(3)理解pod对象

为什么需要pod 最为熟知的一句话&#xff1a;pod是k8s的最小调度单位。刚开始听到这句话时会想&#xff0c;已经有容器了&#xff0c;k8s为什么还要搞个pod出来&#xff1f;容器和pod是什么关系&#xff1f;容器的本质是进程&#xff0c;而k8s本质上类似操作系统。 熟悉Linux的…

在git使用SSH密钥进行github身份认证学习笔记

1.生成ssh密钥对 官网文档&#xff1a;Https://docs.github.com/zh/authentication&#xff08;本节内容对应的官方文档&#xff0c;不清晰的地方可参考此内容&#xff09; 首先&#xff0c;启动我们的git bush&#xff08;在桌面右键&#xff0c;点击 Git Bush Here &#xf…

SystemVerilog学习(0)——目录与传送门

一、验证导论 SystemVerilog学习&#xff08;1&#xff09;——验证导论-CSDN博客文章浏览阅读403次。SystemVerilog自学&#xff0c;验证系统概述&#xff0c;什么是SVhttps://blog.csdn.net/apple_53311083/article/details/133953016 二、数据类型 SystemVerilog学习&…