這是效果圖 這篇文章教大家怎麼弄一個模糊背景
<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) 這相當於一個濾鏡的作用