Можно ли размыть только определенную часть изображения с помощью CSS-фильтра?

У меня есть фоновое изображение и вы хотите размыть определенную его часть без эффекта всего изображения? Например, только нижний левый угол, центральный или верхний правый угол? Можно ли это сделать?

Ответ 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>