相关疑难解决方法(0)

我用这段代码模糊了一些图像

img {
  filter: blur(5px);
  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
}

然而,图像的边缘也变得模糊.是否可以模糊图像,同时保持边缘定义？像插图模糊或什么？

我想在悬停时模糊图像.

问题是图像的边缘也会令人不快地模糊.在小提琴中你可以清楚地看到绿色背景.

如果我缩放图像即1.2,它最终会解决问题,但在过渡期间仍会出现模糊边缘.

任何想法如何有这种效果的尖锐边缘？

http://jsfiddle.net/d8Njs/

HTML:

<div class="item">
   <img src="http://placekitten.com/300"/>
</div>

CSS:

.item {
overflow: hidden;
width:300px;
height: 300px;
background: green;
}

.item img{
transition:all .5s ;
}

.item img:hover{
-webkit-filter: blur(5px);
/*skaling the image would help, but it still looks bad during the transition
-webkit-transform:scale(1.2); */
}

我必须仅模糊背景图像的下半部分。应该是这样的，

此代码模糊了整个图像：

<style>
body {
  background-image: url('ms.png');
  background-size:100% auto;
  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
  filter: blur(5px);
}
</style>

如何使用 CSS 来做到这一点？