размытие не работает должным образом

Question

Я уже провел много времени, но я не могу решить проблему.

У меня есть website. Как вы видите, в заголовке есть размытие, но он статичен, т. Е. Если вы опустите этот фрагмент ниже Background Blurs, останется неизменным. скажи мне, как исправить?

$(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"> 
 
\t \t \t \t Высокая стадия<br>строительной готовности 
 
\t \t \t </a> 
 
    <a href="" class="discount"></a> 
 
    <?php include('seven.php') ?> 
 
</div>

Answer 1

Вы не включили svg часть в вашем HTML.

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

filter: url(#blur); в CSS относится к SVG, где #blur является идентификатор фильтра

А вот код обновления.

$(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"> 
 
\t \t \t \t Высокая стадия<br>строительной готовности 
 
\t \t \t </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 -->

Answer 2

Удалить <div class="blur"><img src="img/bg1.jpg"></div>.

Снимите: header:after { background: rgba(56,52,68,0.4); }