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>
You did not include the
svg
part in your html.The
filter: url(#blur);
in the css refers to the svg where#blur
is the id of the filterAnd here your update code.