如何将MP4设置为网页的背景

最新推荐文章于 2024-09-10 15:13:08 发布

北执丿

最新推荐文章于 2024-09-10 15:13:08 发布

阅读量1.8k

点赞数 5

分类专栏： HTML 文章标签： html5 css

本文链接：https://blog.csdn.net/qq_47794306/article/details/119349730

版权

HTML 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.fullscreenvideo {
			    position: absolute;
			    top: 50%;
			    left: 50%;
			    min-width: 100%;
			    min-height: 100%;
			    width: auto;
			    height: auto;
			    z-index: -100;
			    -webkit-transform: translateX(-50%) translateY(-50%);
			    transform: translateX(-50%) translateY(-50%);
			    -webkit-transition: 1s opacity;
			    transition: 1s opacity;
			}
			 
			.videocontainer{
			    position: fixed;
			    width: 100%;
			    height: 100%;
			    overflow: hidden;
			    z-index: -100; 
			}
			 
			.videocontainer:before{
			    content: "";
			    position: absolute;
			    width: 100%;
			    height: 100%;
			    display: block;
			    z-index: -1;
			    top: 0;
			    left: 0;
			    background: rgba(0,0,0,0);
			}
		</style>
	</head>
	<body>
		
		 <div class="videocontainer">
		 <video class="fullscreenvideo" playsinline="" autoplay="" muted="" loop="">
		 <source src="./img/1.mp4" type="video/mp4"><!-- 在这改路径即可直接食用 -->
		 </video>
		 </div>
		  
	</body>
</html>