是否可以使用CSS过滤器模糊图像的特定部分?

我有一个背景图像,想要模糊一个特定的部分,而不影响整个图像?例如,只有左下角,中心或右上角?有可能吗?

解决方法

不幸的是,只使用CSS不能使这种情况发生.您可以通过在包含背景图像的同一容器中放置一个额外的绝对元素来实现您的目标.

可能是这样的事情

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

相关文章

Css3如何实现鼠标移上变长特效?(图文+视频)
css3怎么实现鼠标悬停图片时缓慢变大效果?(图文+视频)
jquery如何实现点击网页回到顶部效果?(图文+视频)
css3边框阴影效果怎么做?(图文+视频)
css怎么实现圆角边框和圆形效果?(图文+视频教程)
Css3如何实现旋转移动动画特效