通常在个人中心会看到这种效果,如下图:
布局:
<div class="main">
<img src="../image/icon_touxiang.png" class="blur">
</div>
<div class="content">
<img src="../image/icon_touxiang.png" class="content_img">
</div>
css:
.main {
position: relative;
height: 200px;
overflow: hidden;
}
.blur {
position: absolute;
top: -10%;
left: -10%;
width: 120%;
height: 120%;
-webkit-filter: blur(3px);
filter: blur(3px);
}
.content_img {
position: absolute;
top: 30px;
left: 30px;
width: 50px;
height: 50px;
border-radius: 50%;
border: 1px solid #fff;
}