html - 用于整页导航的模糊过滤器

Question

我想让整个页面的导航淡入淡出，基本上充当过滤器，模糊整个屏幕，导航除外。当用户单击菜单按钮时。但是，我似乎无法让它工作。我已经尝试过 css blur filter 和 svg filters 并且我已经搜索了整个网站。有什么我想念的吗？

$('.nav').hide();
$('.hamburger').click(function(){
    $('.nav').fadeToggle('slow');
    $('.hamburger div').toggleClass('turn-white');
});
$('.nav-dropdown-toggle > span > a, .navigation > li > a, .nav-dropdown > li > a').click(function(){
    $('.nav').fadeToggle('slow');
    $('body').toggleClass('disable-scroll');
});

.nav{
    height:100vh;
    width:100%;
    position:fixed;
    z-index:5;
    display:none;
    text-align:right;
}
#nav_bg{
    height:100%;
    width:100%;
    position:absolute;
    z-index:100;
    background-color:rgba(0,0,0,0.5);
    filter: blur(15px);
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="hamburger">Menu Button</button>

<div class="nav">
        <div id="nav_bg"></div>
        <ul class="navigation">
            <li class="nav-dropdown-toggle"><span><a href="#packages">Packages</a></span>
                <ul class="nav-dropdown">
                    <li><a>Business Packages</a></li>
                    <li><a>Top Producers</a></li>  
                    <li><a>Video Ads</a></li>  
                    <li><a>Proud Community Sponsor</a></li>  
                </ul>
            </li>
            <li><a href="#campaigns">Campaign Options</a></li>
            <li><a href="#">Contact</a></li>
            <li><a href="#">Log In</a></li>
            <li>
                <a href="https://www.facebook.com/Supporting-Our-Community-com-1081805428499269/?ref=hl" class="social"><img src="img/402-facebook2.svg"></a>
                <a href="https://www.youtube.com/channel/UCvmPcOGA69v2onNJHDAFwYg" class="social"><img src="img/414-youtube.svg" style="width:47px;"></a>
                <a href="https://www.linkedin.com/in/SupportingOurCommunity" class="social"><img src="img/458-linkedin.svg"></a>
            </li>
        </ul>
    </div>

<div class="example-content">
<h3>THIS SHOULD BE BLURRED</h3> 
  <h3>THIS SHOULD BE BLURRED</h3> 
  <h3>THIS SHOULD BE BLURRED</h3> 
  <h3>THIS SHOULD BE BLURRED</h3> 
  <h3>THIS SHOULD BE BLURRED</h3> 
  <h3>THIS SHOULD BE BLURRED</h3> <h3>THIS SHOULD BE BLURRED</h3> <h3>THIS SHOULD BE BLURRED</h3> 
  <h3>THIS SHOULD BE BLURRED</h3> <h3>THIS SHOULD BE BLURRED</h3> <h3>THIS SHOULD BE BLURRED</h3> 
  <h3>THIS SHOULD BE BLURRED</h3> 
  <h3>THIS SHOULD BE BLURRED</h3> 
  <h3>THIS SHOULD BE BLURRED</h3> 

Answer 1

您也可以从脚本中定位要模糊的主要内容:

$('.nav').hide();
$('.hamburger').click(function(){
    $('.nav').fadeToggle('slow');
    $('.hamburger div').toggleClass('turn-white');
    $('.example-content').toggleClass('blur');
});
$('.nav-dropdown-toggle > span > a, .navigation > li > a, .nav-dropdown > li > a').click(function(){
    $('.nav').fadeToggle('slow');
    $('body').toggleClass('disable-scroll');
});

.nav{
    height:100vh;
    width:100%;
    position:fixed;
    z-index:5;
    display:none;
    text-align:right;
}
#nav_bg {
    height:100%;
    width:100%;
    position:absolute;
    z-index:100;
    background-color:rgba(0,0,0,0.5);
}
.blur{

    filter: blur(5px);
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="hamburger">Menu Button</button>

<div class="nav">
        <div id="nav_bg"></div>
        <ul class="navigation">
            <li class="nav-dropdown-toggle"><span><a href="#packages">Packages</a></span>
                <ul class="nav-dropdown">
                    <li><a>Business Packages</a></li>
                    <li><a>Top Producers</a></li>  
                    <li><a>Video Ads</a></li>  
                    <li><a>Proud Community Sponsor</a></li>  
                </ul>
            </li>
            <li><a href="#campaigns">Campaign Options</a></li>
            <li><a href="#">Contact</a></li>
            <li><a href="#">Log In</a></li>
            <li>
                <a href="https://www.facebook.com/Supporting-Our-Community-com-1081805428499269/?ref=hl" class="social"><img src="img/402-facebook2.svg"></a>
                <a href="https://www.youtube.com/channel/UCvmPcOGA69v2onNJHDAFwYg" class="social"><img src="img/414-youtube.svg" style="width:47px;"></a>
                <a href="https://www.linkedin.com/in/SupportingOurCommunity" class="social"><img src="img/458-linkedin.svg"></a>
            </li>
        </ul>
    </div>

<div class="example-content">
<h3>THIS SHOULD BE BLURRED</h3> 
  <h3>THIS SHOULD BE BLURRED</h3> 
  <h3>THIS SHOULD BE BLURRED</h3> 
  <h3>THIS SHOULD BE BLURRED</h3> 
  <h3>THIS SHOULD BE BLURRED</h3> 
  <h3>THIS SHOULD BE BLURRED</h3> <h3>THIS SHOULD BE BLURRED</h3> <h3>THIS SHOULD BE BLURRED</h3> 
  <h3>THIS SHOULD BE BLURRED</h3> <h3>THIS SHOULD BE BLURRED</h3> <h3>THIS SHOULD BE BLURRED</h3> 
  <h3>THIS SHOULD BE BLURRED</h3> 
  <h3>THIS SHOULD BE BLURRED</h3> 
  <h3>THIS SHOULD BE BLURRED</h3>