模糊无法正常工作

Question

我已经花了很多时间，但还是解决不了问题。

我有一个website。正如您在 header 中看到的那样，有模糊，但他是静态的，即，如果您省略下面的这块，背景模糊将保持不变。告诉我如何解决？

$(document).ready(function() {
  var mySwiper = new Swiper('.swiper-container', {
    nextButton: '.swiper-button-next',
    prevButton: '.swiper-button-prev',
    simulateTouch: false,
    autoplay: false,
    loop: true,
    autoplayDisableOnInteraction: false
  })
});

img.bg {
  min-height: 100%;
  min-width: 1024px;
  width: 100%;
  height: auto;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1;
}
.blur {
  height: 92px;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 1;
  position: absolute;
  filter: blur(10px);
  -webkit-filter: blur(10px);
  -moz-filter: blur(10px);
  -o-filter: blur(10px);
  -ms-filter: blur(10px);
  filter: url(#blur);
  filter: progid: DXImageTransform.Microsoft.Blur(PixelRadius='10');
  overflow: hidden;
}
.sliderr {
  width: 100%;
  height: 100%;
  position: absolute !important;
  top: 0;
  left: 0;
}
.index .sliderr .swiper-slide {
  width: 100%;
  height: 100%;
}
.sliderr img {
  width: 100%;
  height: auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="http://www.horoshevski.ru/css/swiper.min.css" rel="stylesheet" />
<script src="http://www.horoshevski.ru/jscripts/swiper.min.js"></script>
<div class="main_content_blocks">
  <div class="main_block">
    <div class="sliderr swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide">
          <div class="blur">
            <img src="http://www.horoshevski.ru/pic/design/index-banner.jpg?1422273018">
          </div>
          <img src="http://www.horoshevski.ru/pic/design/index-banner.jpg?1422273018">
        </div>
      </div>
    </div>
  </div>
  <div class="three_btns">
    <div class="bttn_popup" onclick="popup('http://lefort.ndv.ru/plus/');"></div>
    <div class="bttn_popup">
      <a href=""></a>
    </div>
    <div class="bttn_popup"></div>
  </div>
  <a href="" class="str">
    Высокая стадия<br>строительной готовности
   </a>
  <a href="" class="discount"></a>
  <?php include( 'seven.php') ?>
</div>

Answer 1

移除 <div class="blur"><img src="img/bg1.jpg"></div>.

删除：header:after { background: rgba(56,52,68,0.4); }

Answer 2

您没有在 html 中包含 svg 部分。

<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
   <filter id="blur">
     <feGaussianBlur stdDeviation="10" />
  </filter>
</svg>

css中的filter: url(#blur);指的是svg，其中#blur是过滤器的id

这是您的更新代码。

$(document).ready(function() {
  var mySwiper = new Swiper('.swiper-container', {
    nextButton: '.swiper-button-next',
    prevButton: '.swiper-button-prev',
    simulateTouch: false,
    autoplay: false,
    loop: true,
    autoplayDisableOnInteraction: false
  })
});

img.bg {
  min-height: 100%;
  min-width: 1024px;
  width: 100%;
  height: auto;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1;
}
.blur {
  height: 92px;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 1;
  position: absolute;
  filter: blur(10px);
  -webkit-filter: blur(10px);
  -moz-filter: blur(10px);
  -o-filter: blur(10px);
  -ms-filter: blur(10px);
  filter: url(#blur);
  filter: progid: DXImageTransform.Microsoft.Blur(PixelRadius='10');
  overflow: hidden;
}
.sliderr {
  width: 100%;
  height: 100%;
  position: absolute !important;
  top: 0;
  left: 0;
}
.index .sliderr .swiper-slide {
  width: 100%;
  height: 100%;
}
.sliderr img {
  width: 100%;
  height: auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="http://www.horoshevski.ru/css/swiper.min.css" rel="stylesheet" />
<script src="http://www.horoshevski.ru/jscripts/swiper.min.js"></script>
<div class="main_content_blocks">
  <div class="main_block">
    <div class="sliderr swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide">
          <div class="blur">
            <img src="http://www.horoshevski.ru/pic/design/index-banner.jpg?1422273018">
          </div>
          <img src="http://www.horoshevski.ru/pic/design/index-banner.jpg?1422273018">
        </div>
      </div>
    </div>
  </div>
  <div class="three_btns">
    <div class="bttn_popup" onclick="popup('http://lefort.ndv.ru/plus/');"></div>
    <div class="bttn_popup">
      <a href=""></a>
    </div>
    <div class="bttn_popup"></div>
  </div>
  <a href="" class="str">
    Высокая стадия<br>строительной готовности
   </a>
  <a href="" class="discount"></a>
  <?php include( 'seven.php') ?>
</div>

<!-- You've missed that part -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
   <filter id="blur">
     <feGaussianBlur stdDeviation="10" />
   </filter>
</svg>
<!-- You've missed that part -->

模糊无法正常工作

blur not working properly

html

css

blur