做了個(gè)Demo，你參考一下。原理就是使用絕對(duì)定位，背景模糊圖片單獨(dú)放在一個(gè)div（blur_bg）中，和 banner_content_wrapper同級(jí)，這樣前者的模糊不會(huì)影響后者。

<style type="text/css">
    #banner {
        position: relative;
        width: 800px;
        height: 600px;
    }

    #banner_content_wrapper {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 2;
    }

    #cover img {
        width: 100px;
    }

    .blur_bg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
        background-repeat: no-repeat;
        background-size: cover;
        -webkit-filter: blur(15px); /* Chrome, Opera */
       -moz-filter: blur(15px);
        -ms-filter: blur(15px);    
            filter: blur(15px);
    
    filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=10, MakeShadow=false); /* IE6~IE9 */
    }
</style>
 <section id="banner" class="clearfix">
      <div class="blur_bg" style="background-image: url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1533781369621&di=42cbdc579e55a232da39576cfe299ee3&imgtype=0&src=http%3A%2F%2Fwww.027art.com%2Fdesign%2FUploadFiles_5246%2F201209%2F2012092721580704.jpg);">
        </div>
      <div id="banner_content_wrapper">
          <div id="cover" >
              <img id="cover_img" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1533781369621&di=42cbdc579e55a232da39576cfe299ee3&imgtype=0&src=http%3A%2F%2Fwww.027art.com%2Fdesign%2FUploadFiles_5246%2F201209%2F2012092721580704.jpg" alt="失蹤的孩子">
              <div class="best_of_month"><p>8月最佳</p></div>
          </div>

          <div id="content">
              <h2>失蹤的孩子</h2>
              <div id="rating">
                  <span class="oi oi-star" title="e" aria-hidden="true"></span>
                  <span class="oi oi-star"></span>
                  <span class="oi oi-star"></span>
                  <span class="oi oi-star"></span>
                  <span class="oi oi-star"></span>
                  <span class="oi oi-star inactive"></span>
              </div>
              <p class="author">作者：[意] 埃萊娜·費(fèi)蘭特</p>
              <p class="tag">那不勒斯四部曲<span>/</span>女性<span>/</span>意大利文學(xué)</p>
              <p class="desicription">《失蹤的孩子》是“那不勒斯四部曲”的第四部，小說(shuō)聚焦了莉拉和埃萊娜（“我”）的壯年和晚年，為她們持續(xù)了五十多年的友誼劃上了一個(gè)令人心碎的句號(hào)。</p>
          </div>

      </div>
    </section>