blur not working properly

735 views Asked by At

Already I spent a lot of time, but I can not solve the problem.

I have a website. As you can see in the header has blur, but he's static, ie, if you omit this piece below Background Blurs remain unchanged. tell me how to fix?

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

2

There are 2 answers

0
Xlander On BEST ANSWER

You did not include the svg part in your html.

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

The filter: url(#blur); in the css refers to the svg where #blur is the id of the filter

And here your update code.

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

2
odedta On

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

Remove: header:after { background: rgba(56,52,68,0.4); }