移動端模糊背景
阿新 • • 發佈:2018-11-12
這是效果圖 這篇文章教大家怎麼弄一個模糊背景
<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) 這相當於一個濾鏡的作用