The fuzzy background of help does not affect the writing of child elements.

recently at the front end, I designed a website by myself. I want to make it happen.
the result is stuck on the background blur does not affect the child elements, how to make the background blur, the cover image above is displayed normally? According to some articles, the use of pseudo-classes will not work.
HTML is as follows 

 <section id="banner" class="clearfix">
      <div id="banner_content_wrapper">
          <div id="cover" >
              <img src="../images/book1.jpg" alt="">
              <div class="best_of_month">
8
</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 class="tag"><span>/</span><span>/</span>

              <p class="desicription">"" "" 

          </div>

      </div>
  </section>

Html css
Apr.05,2021

made a Demo, for your reference. The principle is to use absolute positioning, and the background blur image is placed separately in a div (blur_bg), at the same level as banner_content_wrapper, so that the blur of the former will not affect the latter. 

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

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

    -sharpcover 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://img.codeshelper.com/upload/img/2021/04/05/gbc0dqds2wp15331.jpg);">
        </div>
      <div id="banner_content_wrapper">
          <div id="cover" >
              <img id="cover_img" src="https://img.codeshelper.com/upload/img/2021/04/05/gbc0dqds2wp15331.jpg" alt="">
              <div class="best_of_month">
8
</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 class="tag"><span>/</span><span>/</span>

              <p class="desicription">"" "" 

          </div>

      </div>
    </section>

Previous: Git push reported an error

Next: What did the js file do when it was loaded?

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1b45cf6-2c7d9.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1b45cf6-2c7d9.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?