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

我想在悬停时模糊图像.

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

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

解决方法

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

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

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

clip：rect(顶部,右侧剪辑偏离左侧,底部偏离顶部,左侧)

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

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

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

3 ..将图像包含在略小于图像的包含元素(例如a)中,将溢出：隐藏到外部元素并向左移动图像并略微向上移动以消除这些边缘上的可见模糊.

–

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

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

原文地址：https://www.jb51.cc/css/216092.html