Javascript 仅滚动背景模糊

我想有一个背景模糊的滚动。它可以工作，但是区域内的一切都变得模糊了。我只想有一个模糊的背景图像。有人能帮忙吗

我的代码：

<section class="block clearfix z-index background--image text--white blurme" style="background-image: url(<?php echo $image_src ?>);">
  <div class="block__black">
    <div class="grid__container no-padding">
      <div class="grid__row">
        <div class="grid__col--10 grid__shift--1 grid__col--sm--1">
          <div id="noblur">
            <?php
              $a = new GlobalArea('Banner Navigation');
              $a->display($c);
            ?>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

---

干杯

您可以通过执行以下代码来实现

<section class="block clearfix z-index background--image text--white blurme" style="z-index: -1; height: 100%; width: 100%; position: absolute; background-image: url(<?php echo $image_src ?>);"></section>
<section class="block clearfix z-index background--image text--white blurmeNot" style="background-color: transparent">
  <div class="block__black">
  <div class="grid__container no-padding">
   <div class="grid__row">
    <div class="grid__col--10 grid__shift--1 grid__col--sm--1">
      <div id="noblur">
        <?php
          $a = new GlobalArea('Banner Navigation');
          $a->display($c);
        ?>
      </div>
     </div>
   </div>
  </div>
 </div>
</section>

---

尝试在“选择器”之前或之后模糊



横幅
.布鲁姆{
位置：相对位置；
高度：600px；
}
.我：以前{
内容：“；
位置：绝对位置；
z指数：-1；
排名：0；
底部：0；
左：0；
右：0；
背景：url（“https://thumb7.shutterstock.com/display_pic_with_logo/2502094/402146209/stock-photo-sample-rubber-stamp-text-on-white-background-402146209.jpg");
-webkit过滤器：模糊（20px）；
}
如果可能的话，我想要一个jquery解决方案。除了对#noblur的某种例外。我找不到解决办法。这不是我要找的即时消息好吧，我会为您找到jquery解决方案。：）
<section class="block clearfix z-index background--image text--white blurme" style="z-index: -1; height: 100%; width: 100%; position: absolute; background-image: url(<?php echo $image_src ?>);"></section>
<section class="block clearfix z-index background--image text--white blurmeNot" style="background-color: transparent">
  <div class="block__black">
  <div class="grid__container no-padding">
   <div class="grid__row">
    <div class="grid__col--10 grid__shift--1 grid__col--sm--1">
      <div id="noblur">
        <?php
          $a = new GlobalArea('Banner Navigation');
          $a->display($c);
        ?>
      </div>
     </div>
   </div>
  </div>
 </div>
</section>

<div class="blurme">
  <div class="no-blur">
    banner
  </div>
</div>

.blurme {
  position: relative;
  height:600px;
}

.blurme:before {
  content: "";
  position:absolute;
  z-index: -1;
  top:0;
  bottom:0;
  left:0;
  right:0;
  background: url("https://thumb7.shutterstock.com/display_pic_with_logo/2502094/402146209/stock-photo-sample-rubber-stamp-text-on-white-background-402146209.jpg");
  -webkit-filter: blur(20px);
}