移动端模糊背景

这是效果图 这篇文章教大家怎么弄一个模糊背景

		<div class="header">
			<div class="avatar">
				<img src="-fzaumvdz/touxiang.jpg" width="100px" height="100px"/>
			</div>
			<div class="back">
				<img width="100%" height="100%" src="-fzaumvdz/touxiang.jpg"/>
			</div>
		</div>

			*{
				margin: 0;
				padding: 0;
			}
			body{
				margin: 0 auto;
			}
			.header{
				width: 100%;
				min-height: 500px;
				position: relative;
				overflow: hidden;
				background-color: rgba(7,17,27,0.5);
			}
			.back{
				position: absolute;
				top: 0;
				left: 0;
				z-index: -1;
				margin: 0 auto;
				width: 100%;
				height: 100%;
				filter: blur(10px);
			}
			.avatar{
				margin:20px 0 0 50px;
			}

其中最重要的属性为filter:blur(10px) 这相当于一个滤镜的作用