如何使用css滤镜获得图像:模糊和锐利的边缘？

Question

我想在悬停时模糊图像.

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

如果我缩放图像即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); */
}

Answer 1

我所知道的技术,很好地解释了http://demosthenes.info/blog/534/Crossbrowser-Image-Blur:

1 ..如果您的图像在所有外边缘上具有相同的颜色,如上例所示,您可以将正文的背景颜色或容器元素设置为相同的颜色.(仅供参考;不适用于您,至少不适用于您的小提琴).

2 ..使用clip属性修剪图像的边缘.剪辑始终按以下顺序说明:

clip: rect( top, offset of right clip from left side, offset of bottom from top, left)

对于上面的示例,图像宽367像素×459像素高,模糊2像素,因此剪辑将表示为:

clip: rect(2px,365px,457px,2px);

(请注意,剪辑仅应用于具有位置的元素:绝对应用于它们.如果您想在IE8及更早版本中获得支持,请记住将px放在值的末尾).(不知道你是否在堆叠,网格或只是标注中布置照片等.如果你可以吞下绝对定位,这可能是合适的.)

3 ..将图像包含在略小于图像的包含元素(例如a)中,将overflow:hidden应用于外部元素并将图像向左移动并稍微向上移动以消除这些边缘上的可见模糊.

-

此外,在图像周围抛出边框似乎至少在Webkit中有所帮助,但我还没有对它进行过广泛的测试.

.item img{
    transition:all .5s ;
    border:1px solid #000;
}