Web前端前沿技术 1 ____视频背景

109905418

已于 2022-11-07 21:06:30 修改

阅读量1.6k

点赞数 1

分类专栏： HTML5程序设计文章标签： Web视频背景

于 2018-04-23 00:24:25 首次发布

本文链接：https://blog.youkuaiyun.com/aduovip/article/details/80045062

版权

HTML5程序设计专栏收录该内容

14 篇文章

订阅专栏

先看效果图

主要代码如下:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			*{
				padding: 0;
				margin: 0;
			}
			.banner{
				width: 100%;
				min-width: 1200px;
				height: 500px;
				overflow: hidden;	/***溢出时隐藏*/
				position: relative;
				background: #000;
			}
			.banner video{
				width: 100%;
				position: relative;
				top: -100px;
				opacity: 0.4;				/***改变透明度，可以让视频模糊些**/
			}
			.banner h2{
				position: absolute;
				left: 0;
				top: 0; 
				color: #fff;
				width:100%;
				text-align: center;
				font-size: 50px;
				font-family: "微软雅黑";
				padding: 80px 0;
			}
		</style>
	</head>
	<body>
		<section class="banner">
			<video loop  autoplay muted="muted">
				<source  src="video/city.mp4"></source>
			</video>
			<!--要让字压住视频， 需要用定位-->
			<h2>具有大众消费开胃特色 <br />中国传统手工泡菜第一品牌</h2>
		</section>
	</body>
</html>

完整实现请参考 Webfront 工程

关注博主即可阅读全文