Question

我想在悬停时模糊图像。

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

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

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

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;
}

Answer 2

一点SVG：

<svg width="200" height="200" viewBox="10 10 280 280">
<filter id="blur">
 <feGaussianBlur stdDeviation="10"/>
</filter>
<image id="kitten" x="0" y="0" width="300" height="300" xlink:href="http://placekitten.com/300"/>
</svg>

还有一些CSS：

 #kitten:hover { filter:url(#blur); }

应该产生预期的效果。 http://jsfiddle.net/5Jk6p/

#kitten:hover {
  filter:url(#blur);
}

<svg width="200" height="200" viewBox="10 10 280 280">
  <filter id="blur">
    <feGaussianBlur stdDeviation="10" />
  </filter>
  <image id="kitten" x="0" y="0" width="300" height="300" xlink:href="http://placekitten.com/300" />
</svg>

Answer 3

似乎设置剪辑或多或少地解决了问题。但是，在过渡结束时会产生奇怪的影响。迫使GPU（通过translateZ hack）似乎解决了这个问题。

CSS

div {
    width:300px;
    height:300px;
    position: absolute;
}
.no {
    left: 400px;
    top: 10px;
}

.box img {
   transition: 2s -webkit-filter;
   position:absolute;
   left: -3px;
   top:-3px;
    clip: rect(5px 295px 295px 5px);
    -webkit-transform: translateZ(0px);
}
div img {
   transition: 2s -webkit-filter;
   position:absolute;
   left: -3px;
   top:-3px;
    clip: rect(5px 295px 295px 5px);
}

div img:hover{
    -webkit-filter: blur(8px);
}

demo with a comparative with and without the transform

Answer 4

在这一天花了一天之后，我能够创造一个糟糕，丑陋，黑客的解决方案。可能不会在真实的项目中使用它，mut也许它可以激励其他人在我的解决方案中使用某些东西但是让它变得不那么难看。至少最终的结果看起来像我喜欢的方式！

使用白色边框和方框尺寸：边框，然后是一些边距，我能够得到最终结果有锋利的边缘，而3/4边缘在过渡期间不显示绿色背景。如果有人在过渡期间发现为什么某些边缘会随背景消失，那可能会有所帮助。

http://jsfiddle.net/fVNqm/2/

HTML：

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

CSS：

.box{
box-sizing: border-box;
position:relative;
border:3px solid white;
overflow: hidden;
background:green;
width:300px;
height:300px;
}

div img {
transition:.2s all;
position:absolute;
left: -3px;
top:-3px;
}

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

.tophack{ 
background:white;
width:300px;
height:3px;
z-index:10;
position:absolute;
top: 0px;
}

仍然希望有更好的东西！

Answer 5

将此添加到您的css

.item img{margin:0px 0px 0px -1px;}

Answer 6

我会查看此链接，然后从那里开始。关于javascript的最佳部分有非常宽松的想法。

http://fabricjs.com/image-filters/

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

6 个答案: