만 스크롤 할 때 배경 흐림

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> 

그리고 내 자바 스크립트

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