css 设置背景图片模糊效果

效果：

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;
        }