【发布时间】：2015-07-16 18:00:13
【问题描述】：
可以通过添加负边距来防止图像出现未定义的模糊边缘，但在 CSS 过渡期间这会失败。在添加或删除滤镜模糊类时，如何保持在 CSS 过渡期间定义的图像边缘？
测试于：
- Firefox 37：效果很好！
- Chrome 42：图像和 父元素遇到图像闪烁/模糊/未定义
- IE9：没那么多...
看看我的例子：Codepen
HTML：
<link href='http://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Hind' rel='stylesheet' type='text/css'>
<div class="container">
<img class="blur" src="http://budgetstockphoto.com/bamers/stock_photo_spectrum.jpg"/>
</div>
<div class="col">
<h2 class="montserrat">Hover Over Image</h2>
<hr>
<p class="hind">Preventing an image from having undefined blurry edges can be achieved by adding negative margin, but during a CSS transition this fails. As you can see, on-hover, the edges of the image become undefined/blurred. How can you keep the edges of an image defined during a CSS transition while applying or removing filter blur?<br><br>Hover over the image!</p>
</div>
CSS：
html,body{
margin:0;
text-align:center;
background:#F8F8F8;
height:100%;
}
h2{
margin:1em 0;
padding:0;
line-height:1;
color:#111;
}
p{
margin:1em 0;
padding:0;
line-height:1;
text-align:justify;
color:#999;
}
.montserrat{
font-family: 'Montserrat', sans-serif;
}
.hind{
font-family: 'Hind', sans-serif;
}
hr {
width:100%;
display: block;
height: 1px;
border: 0;
border-top: 1px solid #222;
margin: 1em 0;
padding: 0;
line-height:0;
}
.col{
max-width:400px;
display:inline-block;
height:100%;
float:left;
background:#333;
padding-left:20px;
padding-right:20px;
}
.container{
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width:10%;
display:inline-block;
padding-top:10%;
position:absolute;
overflow:hidden !important;
border-radius:50%;
-webkit-filter: blur(0px); -moz-filter: blur(0px); -o-filter: blur(0px); -ms-filter: blur(0px); filter: blur(0px);/*prevents image from overflowing*/
}
.container img{
position:absolute;
min-width:calc(100% + 30px);
height:calc(100% + 30px);
left:-15px;
right:-15px;
top:-15px;
bottom:-15px;
-webkit-transition: .5s ease-in-out;
}
.blur{
-webkit-filter: blur(5px); -moz-filter: blur(5px); -o-filter: blur(5px); -ms-filter: blur(5px); filter: blur(5px);
}
只是一点点 jQuery：
$(document).ready(function(){
$('img').hover(function(){
$(this).toggleClass('blur');
});
});
【问题讨论】：
-
我猜你正在用 chrome 进行测试，对吗？因为它在 Firefox 上运行良好。
-
正确，我正在 Chrome 中进行测试。我绝对应该包括那个花絮。我会将其添加到描述中。它在 Firefox 中运行良好，在 IE9 中看起来平庸。不过，我对 IE9 的关注不如对 Chrome 的关注。如果您在 Chrome 中进行测试，您会看到在过渡期间，父元素和图像相遇的边框如何闪烁/变得未定义。
-
可以截图吗？因为我在 chrome 中发现了一些奇怪的东西，但我不会说边框模糊，我会说它对背景进行采样并显示比然后消失的更暗的边框。如果是这样，可能是由于该功能的新颖性，也许您不必担心，他们将来会修复它。顺便说一句，我检查了它是否使图像得到了更大的修复，但事实并非如此。如果这对您很重要，也许您可以添加更标准的 svg 模糊？只是一个建议
-
@Vandervals 这正是我所看到的。通过添加 translate3d 属性来加速处理并将背面可见性设置为隐藏，它似乎或多或少地解决了这个问题。奇怪的是，在使用模糊滤镜时，图像边界未定义的问题非常普遍。解决这个问题的标准方法是通过使图像大于它所在的容器来隐藏未定义的边缘，我已经这样做了。它基本上是在不属于它的地方应用模糊？
标签： jquery css css-transitions css-filters