把视频当背景

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>qdabc.cn</title>
		<style type="text/css">
			*{margin: 0;padding: 0;}
			h1{margin: 50px auto;width: 300px;}
			video{
			position: fixed;
		    z-index: -1;
		    object-fit: cover;
		    width: 100%;
		    height: 100%;
		    }
		    /*object-fit:cover 的裁剪方式和 background-size:cover 的完全相同,不过它是
                     用来为 imgs、videos 和其他的媒体标签设置样式的,而不是给背景图片设置样式。*/
		</style>
	</head>
	<body>
		<video autoplay loop poster="http://yuxiedu.org.cn/index3/ppp.png">   
			<!--自动播放  循环播放  带有预览图-->
		    <source src="http://yuxiedu.org.cn/index3/pp.mp4 " type="video/mp4"></source>
		    <source src="http://yuxiedu.org.cn/index3/pp.ogg" type="video/ogg"></source>
		</video>
		<h1>用视频当背景</h1>
	</body>
</html>

欢迎分享本文,转载请保留出处:前端ABC » 把视频当背景

赞 (1)
分享到:更多 ()

发表评论 0