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

Jiang_JY

已于 2023-12-08 17:10:42 修改

阅读量1.5k

点赞数 3

分类专栏：前端 css html 文章标签：前端 html5 css3

于 2023-12-08 16:14:42 首次发布

本文链接：https://blog.csdn.net/jiangjunyuan168/article/details/134880541

版权

前端同时被 3 个专栏收录

117 篇文章 7 订阅

订阅专栏

css

7 篇文章 0 订阅

订阅专栏

html

4 篇文章 0 订阅

订阅专栏

实现思路

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