移动端模糊背景

最新推荐文章于 2021-08-04 10:02:19 发布

future_tgq

最新推荐文章于 2021-08-04 10:02:19 发布

阅读量587

点赞数 1

分类专栏： Css Html 文章标签：移动 css

本文链接：https://blog.csdn.net/qq2806000829/article/details/75669080

版权

Css 同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

Html

2 篇文章 0 订阅

订阅专栏

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

		<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) 这相当于一个滤镜的作用