MP4格式文件作为小程序背景

零原点

已于 2023-04-04 17:12:33 修改

阅读量572

点赞数 1

文章标签： html 前端

于 2021-12-28 08:39:18 首次发布

本文链接：https://blog.csdn.net/qq_46110556/article/details/122184504

版权

Web开发专栏收录该内容

2 篇文章

订阅专栏

代码演示：

<!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="../assets/背景.mp4" type="video/mp4"><!-- 在这改路径即可直接食用 -->
		 </video>
     <img src="../assets/logo.png" alt="">
		 </div>
		  
	</body>
</html>