是否有可能使用CSS过滤器模糊图像的特定部分？ [英] Is it possible to blur only specific part of the image using CSS filter ?

问题描述

我有背景图片，想要模糊其特定部分而不影响整个图片？例如，只有左下角，中心或右上角？可以这样做吗？

I have a background image and want to blur a specific part of it without effecting the whole image ? For instance, only bottom left side corner, center or top right side corner ? Is it possible to do so?

推荐答案

不幸的是，只使用 CSS 您可以通过在包含背景图片的相同容器中添加额外的绝对元素来实现您的目标。

Unfortunately, using only CSS can't make this happen. You can acheive your goal through putting an extra absolute element in the same container that contains your background image.

这样的东西。

$(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>

这篇关于是否有可能使用CSS过滤器模糊图像的特定部分？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！