求助模糊背景不影响子元素的写法

Question

最近在学前端，自己设计了一个网站。想实现出来。
结果卡在背景模糊不影响子元素上了，如何让大背景模糊，上面的封面图正常显示?按照一些文章说的使用伪类也出不来效果。
HTML如下

 <section id="banner" class="clearfix">
      <div id="banner_content_wrapper">
          <div id="cover" >
              <img src="../images/book1.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">作者：[意] 埃莱娜·费兰特</p>
              <p class="tag">那不勒斯四部曲<span>/</span>女性<span>/</span>意大利文学</p>
              <p class="desicription">《失踪的孩子》是“那不勒斯四部曲”的第四部，小说聚焦了莉拉和埃莱娜（“我”）的壮年和晚年，为她们持续了五十多年的友谊划上了一个令人心碎的句号。</p>
          </div>

      </div>
  </section>

Answer 1

做了个Demo，你参考一下。原理就是使用绝对定位，背景模糊图片单独放在一个div（blur_bg）中，和 banner_content_wrapper同级，这样前者的模糊不会影响后者。

<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">作者：[意] 埃莱娜·费兰特</p>
              <p class="tag">那不勒斯四部曲<span>/</span>女性<span>/</span>意大利文学</p>
              <p class="desicription">《失踪的孩子》是“那不勒斯四部曲”的第四部，小说聚焦了莉拉和埃莱娜（“我”）的壮年和晚年，为她们持续了五十多年的友谊划上了一个令人心碎的句号。</p>
          </div>

      </div>
    </section>