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

实现思路

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

代码

DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>有开发问题可联系作者title>
head>
<body>
    <div class="login">
    	
		<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>

觉得有帮助的朋友可以支持下作者哦,您的鼓励是我创作的最大动力,如有开发问题可联系作者
前端使用视频作为背景图的方法_第1张图片

你可能感兴趣的:(前端,css,html,前端,html5,css3)