如何有css过滤器的图像：模糊和锐利边缘？ [英] How to have an image with css filter:blur and sharp edges?

问题描述

我想在悬停时模糊图片。

I would like to blur an image when hovering.

问题是图片的边缘也模糊不清。
在小提琴中你可以看到它清晰的绿色背景。

The problem is that the edges of the image also blur unpleasantly. In the Fiddle you can see it clearly with the green background.

如果我将缩放图像ie 1.2，它会解决问题的结束

If I'd scale the image i.e. 1.2, it would fix the problem in the end, but during the transition the blurry edges still appear.

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

Any ideas how to have sharp edges with this effect?

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 中进行了很好的解释：

The techniques I know about, nicely explained at http://demosthenes.info/blog/534/Crossbrowser-Image-Blur:

1.如果您有一个图像在所有外边缘具有相同的颜色，如上例所示，您可以设置背景颜色主体或容器元件为相同颜色。 （FYI;不真的适用于你，至少不会在你的小提琴）。

1..If you have an image that has the same color on all the outside edges, as in the example above, you could set the background-color of the body or a container element to the same color. (FYI; doesn't really apply to you, at least not in your fiddle).

2.使用剪辑属性修剪图像的边缘。剪辑总是按以下顺序表示：

2..Use the clip property to trim the edges of the image. clip is always stated in the following order:

剪辑：rect（顶部，右剪辑从左侧偏移，左）

对于上面的示例，图像是367px宽×459像素高和模糊2像素， as：

For the example above, the image is 367px wide × 459 pixels high and the blur 2 pixels, so the clip would be stated as:

剪辑：rect（2px，365px，457px，2px）;

（请注意，剪辑只适用于位置：绝对应用于它们的元素。如果您想在IE8及更早版本中获得支持，请记住将px放在值的末尾。 （不知道您是以堆叠，网格还是只是标注等方式放置照片。如果您可以放弃绝对定位，可能适合。）

(Note that clip is only applied to elements that have position: absolute applied to them. If you wanted to gain support in IE8 and earlier, remember to drop the px on the end of the values). (No idea if you're laying out photos in a stack, a grid, or just callouts, etc. Could be appropriate if you can swallow the absolute positioning.)

3。在比图像略小的包含元素（例如a）中捕获图像，对外部元素应用overflow：hidden，将图像向左移动到稍微向上移动消除这些边缘上的可见模糊。

3..Wrap the image in a containing element (a , for example) that is slightly smaller than the image, applying overflow: hidden to the outer element and moving the image to the left and up slightly to eliminate the visible blur on those edges.

-

帮助至少在Webkit，但我没有测试它广泛。

Also, throwing a border around the image seems to help at least in Webkit, but I haven't tested it extensively.

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

这篇关于如何有css过滤器的图像：模糊和锐利边缘？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！