如何有一个图像与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总是按以下顺序表示:

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

对于上面的例子，图像是367px宽，459像素高，模糊2像素，所以剪辑将被声明为:

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

(注意clip只应用于position: absolute的元素。如果你想在IE8或更早的版本中获得支持，记得去掉值末尾的px)。(不知道你是在堆叠，网格，还是只是标注，等等。如果你能吞下绝对定位，可能是合适的。)

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

另外，在图像周围添加边框似乎至少在Webkit中有帮助，但我还没有进行广泛的测试。

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

一小段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>

似乎设置一个剪辑或多或少解决了这个问题。然而，在过渡结束时有一种奇怪的效果。强制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，比较是否使用

在花了一天的时间之后，我创造了一个蹩脚的，丑陋的，粗糙的解决方案。可能不会在实际项目中使用它，但也许它可以激励其他人在我的解决方案中使用一些东西，但使它不那么丑陋。至少最后的结果看起来像我想要的那样!

使用白色边框和box-sizing: border-box，然后一些边距，我能够得到最终的结果有锐利的边缘，和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;
}

仍然希望有更好的!

添加到你的CSS中

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

相关内容

最新更新

热门标签：