是否可以使用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>