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

仅滚动背景模糊

2 个答案: