css - 如何使用 css 过滤器 :blur and sharp edges? 获取图像

Question

我想在悬停时模糊图像。

问题是图像的边缘也模糊不清。 在 Fiddle 中，您可以清楚地看到它的绿色背景。

如果我缩放图像，即 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, right clip 从左边的偏移量, bottom 到 top, left 的偏移量)

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

剪辑:rect(2px,365px,457px,2px);

(请注意，clip 仅应用于应用了 position: absolute 的元素。如果您想在 IE8 和更早版本中获得支持，请记住在值的末尾删除 px)。 (不知道您是将照片放置在堆栈、网格中，还是只是标注等。如果您可以接受绝对定位，这可能是合适的。)

3..将图像包裹在比图像稍小的包含元素(例如 a )中，应用 overflow: hidden 到外部元素并将图像稍微向左和向上移动以消除可见模糊在那些边缘。

--

此外，在图像周围添加边框似乎至少在 Webkit 中有所帮助，但我尚未对其进行广泛测试。

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