实现思路

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

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

# 前端 # html5 # css3
Logo
技术共进，成长同行——讯飞AI开发者社区

技术共进，成长同行——讯飞AI开发者社区

更多推荐

神经拟态计算：类脑芯片的嵌入式开发指南

神经拟态计算是通过模拟人脑神经系统的工作机制，以实现更加高效、灵活的计算模型。它与传统的计算机系统有很大不同，传统计算机使用二进制运算，而神经拟态计算通过模拟神经元之间的突触传递和处理信号的方式来进行计算。这样的计算方式更符合生物神经系统的工作原理，具有更高的并行处理能力和能效。神经拟态计算与类脑芯片的嵌入式开发是当前人工智能领域中的前沿技术。通过模拟大脑神经系统的工作原理，神经拟态计算能够大大提

avatar 讯飞AI开发者社区

AI大数据的后端架构设计如何确保高并发数据处理

确保AI大数据系统在高并发情况下的稳定运行，不仅依赖于优秀的架构设计，还需要深刻理解系统的瓶颈并进行针对性优化。在面对未来数据量和请求量日益增加的情况下，具备强大并发处理能力的后端架构将是AI大数据应用成功的关键。在面对突发流量时，系统需要能够进行动态扩展。随着人工智能和大数据技术的迅速发展，数据量的爆炸式增长以及实时数据处理的需求，迫使后端架构必须具备强大的高并发数据处理能力。尤其是在需要处理大

avatar 讯飞AI开发者社区

Python全方位指南:定义、应用与零基础入门实战

Python是一种由荷兰程序员Guido van Rossum于1991年发布的高级编程语言。Python的设计哲学强调代码的可读性，且其语法结构清晰，适合初学者入门。与许多编程语言不同，Python使用缩进而不是大括号来表示代码块，这使得代码更加简洁、易懂。Python不仅支持面向对象编程、函数式编程，还具有强大的标准库，能够处理网络编程、数据分析、人工智能、网页开发等多种应用场景。?????P

avatar 讯飞AI开发者社区