是否可以使用CSS滤镜仅模糊图像的特定部分？

Question

我有背景图片，想要模糊它的特定部分而不影响整个图像？例如，只有左下角，中间或右上角？是否有可能这样做？

Answer 1

不幸的是，仅使用CSS就无法做到这一点。您可以通过在包含背景图像的相同容器中添加额外的absolute元素来实现目标。

可能是这样的。

$(document).ready(function() { 
 
    $('button').click(function(e) { 
 
    $(".blurry").css('background-color', 'white') 
 
     .css('opacity', '.1') 
 
     .css('box-shadow', 'white 0px 0px 20px 20px'); 
 
    }); 
 
});

.wrapper { 
 
    width:500px; 
 
    height:150px; 
 
    position:relative; 
 
} 
 

 
#brand { 
 
    width:500px; 
 
    height:150px; 
 
    display:inline-block; 
 
    background-image:url("http://spmdesign.net/wp-content/uploads/2013/05/ss-2-bg.jpg"); 
 
} 
 

 
.blurry { 
 
    width:40px; 
 
    height:50px; 
 
    position:absolute; 
 
    left:30px; 
 
    bottom:25px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> 
 
    <div class="wrapper"> 
 
    <a id="brand"></a> 
 
    <div class="blurry"></div> 
 
    </div> 
 
</div> 
 

 
<button>blur</button>