效果:
html:
<div class="head_channel">
<div class="head_box">
//这里是内容区域
</div>
<div class="blur_bj">
<img src="https://static.esdict.cn/MediaPool/ChannelImg/2ceda489-5911-49ec-9e3d-ed322112ccb2.jpg?stamp=1515058531000" alt="Alternate Text">
</div>
<div class="blur_bj_gray"></div>
</div>
css:
.head_channel {
height: 3rem;
position: relative;
overflow: hidden;
}
.head_channel .blur_bj {
position: absolute;
height: 100%;
width: 100%;
top: 0;
z-index: -1;
-webkit-filter: blur(5px);
filter: blur(15px);
transform: scale(1.2);
}
.head_channel .blur_bj img {
width: 100%;
height: 120%;
}
.head_channel .blur_bj_gray {
position: absolute;
height: 100%;
width: 100%;
top: 0;
background: rgba(0,0,0,.2);
z-index: -1;
opacity: 0.5;
}