今天写项目遇到了模糊背景,查询网上资料,学习到了filter:blur()样式。
html部分
<!-- 专辑封面-->
<div class="albumCover">
<div>
<img src="../assets/picture.jpg" alt="">
<ul>
<li class="albumTitle">制造浪漫|动人此刻连接你我</li>
<li>
<div class="portrait"></div>
<span class="anthor">买菜不用券</span>
</li>
</ul>
</div>
</div>
css部分
//专题封面
.albumCover {
height: 220px;
background: url("../assets/picture.jpg") no-repeat;
background-size: cover;
position: relative;
z-index: -1;
overflow: hidden;
&:after {
content: "";
width: 100%;
height: 220px;
position: absolute;
left: 0;
top: 0;
background: inherit;
filter: blur(20px);
z-index: 1;
}
img {
z-index: 2;
margin: 40px 20px;
position: absolute;
width: 140px;
}
}
//专辑封面中的标题
.albumTitle {
color: #fff;
font-size: 18px;
position: absolute;
top: 40px;
left: 180px;
z-index: 2;
}
//头像
.portrait {
width: 40px;
height: 40px;
background-color: #f1f1f1;
border-radius: 50%;
position: absolute;
bottom: 80px;
left: 180px;
z-index: 2;
}
//作者
.anthor {
color: #cdc9cb;
position: absolute;
bottom: 90px;
left: 227px;
z-index: 2;
}