css 设置背景图片模糊效果

背景图片模糊效果"/>

css 设置背景图片模糊效果

效果：

html:

 <div class="head_channel"><div class="head_box">//这里是内容区域</div><div class="blur_bj"><img src=".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;}