ТОЛЬКО Размытие фона на прокрутке

Question

Я хотел бы иметь размытие фона на прокрутке. Он работает, но все внутри раздела получает размытие. Я хотел бы иметь только фоновое изображение как размытие. Может ли кто-нибудь помочь?

Мой код:

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

И мой Javascript

$(window).scroll(function(e) { 
    var distanceScrolled = $(this).scrollTop(); 

    $('.blurme').css('-webkit-filter', 'blur(' + distanceScrolled/60 + 'px)'); 

}); 

Ура!

Answer 1

Вы можете достичь его, выполнив ниже код

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

Пожалуйста, установите высоту, ширину первой секции в соответствии с вашими потребностями. Удачи :)

Answer 2

Попробуйте размыть до или после «селектора».

https://jsfiddle.net/xrnk08n4/

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