显然，没有一种自然的方法可以使高斯模糊影响到非绝对定位的图像，在这种情况下，svg是一个不错的选择。但是由于某种原因，它在这里不起作用。
我希望滑块上有一个高斯模糊，就像您在这里看到的：https://i.imgur.com/8dXlHbP.jpg
具有类模糊的div是我想要应用svg过滤器的div，这是我的代码：
/*SLIDER AMA START*/
.slider_ama_maincontainer{width:100%; height:92vh; position:relative; overflow:hidden; display:flex;}
.slider_ama_nav_container{width:100%; height:75px; z-index:99999; background-color:rgba(0,0,0,0.5); position:absolute; bottom:0px; left:0px; display:flex; align-items:center;}
.slider_ama_nav_links_container{width:auto; height:auto; display:flex; align-items:center; margin-left:auto;}
.slider_ama_nav_link{font-size:18px; font-weight:400; display:flex; align-items:center; text-shadow:2px 2px 5px rgba(0,0,0,0.6); height:100%; transition:all 300ms ease; padding:0px 25px; background-color:none; color:rgba(255,255,255,1.0); margin:0px 0px;}
.slider_ama_nav_link:hover{background-color:var(--web_primary_color);}
.slider_ama_prev{position:absolute; width:auto; height:auto; top:50%; border-radius:0px; transform:translateY(-50%); left:5px; z-index:9999; display:flex; background-color:none;}
.slider_ama_next{position:absolute; width:auto; height:auto; top:50%; border-radius:0px; transform:translateY(-50%); right:5px; z-index:9999; display:flex; background-color:none;}
.slider_ama_prev .fa{font-size:20px; color:rgba(255,255,255,0.8); margin:auto;}
.slider_ama_next .fa{font-size:20px; color:rgba(255,255,255,0.8); margin:auto;}
.slider_ama_navigation_container{width:auto; height:auto; display:flex; align-items:center; border-radius:5px; justify-content:center; position:absolute; background-color:rgba(0,0,0,0.6); padding:10px 25px; bottom:90px; right:25px; z-index:9999;}
.slider_ama_items_container{width:100%; height:100%; position:relative; overflow:hidden; background-color:black;}
.slider_ama_item{width:100%; height:100%; position:absolute; top:0px; left:0px;}
.slider_ama_gradient_overlay{width:100%; height:100%; z-index:999; position:absolute; top:0px; left:0px;}
.slider_ama_image{width:100%; height:100%; background-size:cover; position:relative; background-position:center; z-index:998;}
.slider_ama_text_container{min-width:40%; height:auto; padding:30px; display:flex; flex-direction:column; border-radius:5px; z-index:9999; position:absolute; background-color:none;}
.slider_ama_text_title{font-size:35px; color:rgba(255,255,255,0.8); margin-bottom:15px; font-weight:400; border-radius:5px; padding:15px; background-color:rgba(0,0,0,0.6); text-shadow:2px 4px 8px rgba(0,0,0,0.6);}
.slider_ama_text_description{font-size:25px; color:rgba(255,255,255,0.8); margin-bottom:15px; font-weight:400; border-radius:5px; padding:15px; background-color:rgba(0,0,0,0.6); text-shadow:2px 4px 8px rgba(0,0,0,0.6);}
.slider_ama_text_link{font-size:20px; color:rgba(255,255,255,0.8); margin-bottom:15px; align-self:center; font-weight:400; border-radius:5px; padding:15px; background-color:var(--web_primary_color); text-shadow:2px 4px 8px rgba(0,0,0,0.6);}
.prev{transition:all 1000ms ease; opacity:1;}
.next{transition:all 1000ms ease; opacity:1;}
.container:hover .prev{opacity:1;}
.container:hover .next{opacity:1;}
.slider_active{display:flex; opacity:1;}
.slider_active_dot{background-color:white;}
.dot{width:15px; height:15px; border-radius:50%; background-color:rgba(255,255,255,0.8); transition: all 2000ms ease; margin:0px 10px; cursor:pointer;}
/*SLIDER AMA END*/
.slider_ama_top_banner{width:100%; height:150px; top:0px; outline:1px solid red; left:0px; display:flex; position:absolute; left:0px; bottom:0px; z-index:99999;}
.blur {
filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius='3');
-webkit-filter: url(#blur-filter);
filter: url(#blur-filter);
-webkit-filter: blur(3px);
filter: blur(3px);
}<section class="slider_ama_maincontainer" style="">
<div class="slider_ama_items_container container" style="">
<div class="slider_ama_items_bottom_gradient_overlay" style=""></div>
<div class="slider_ama_navigation_container navigation" style="">
<a class="slider_ama_prev prev" href="" style=""><i class="fas fa fa-chevron-left" style=""></i></a>
<a class="slider_ama_next next" href="" style=""><i class="fas fa fa-chevron-right" style=""></i></a>
</div>
<div class="slider_ama_item slider" style="">
<div class="slider_ama_gradient_overlay" style="background-color:rgba(0,0,0,0.3);" ></div>
<div class="slider_ama_image move" style="background-image:url('https://morukuru.com/wp-content/uploads/AtholPlace-Restaurant.jpg');"></div>
<div class="slider_ama_text_container top_to_bottom_center" style="">
<span class="slider_ama_text_title" style="">{{ Config::get('globals.slider_title_1') }}</span>
<span class="slider_ama_text_description" style="">{{ Config::get('globals.slider_description_1') }}</span>
<a href="" class="slider_ama_text_link" style="">Interesting link</a>
</div>
</div>
<div class="slider_ama_nav_container" style="">
<div class="slider_ama_nav_links_container" style="">
<a class="slider_ama_nav_link" href="/" style="">Principal</a>
<a class="slider_ama_nav_link" href="/nuestra-carta-de-menus" style="">Menu</a>
<a class="slider_ama_nav_link" href="/horario-de-apertura" style="">Horario</a>
<a class="slider_ama_nav_link" href="/" style="">Localización</a>
<a class="slider_ama_nav_link" href="/" style="">Contactar</a>
<a class="slider_ama_nav_link" href="/" style="">Reseñas</a>
</div>
</div>
<div class="slider_ama_top_banner blur" style="">
</div>
</div>
</section>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<filter id="blur-filter">
<feGaussianBlur stdDeviation="3"></feGaussianBlur>
</filter>
</defs>
</svg>