可以通过添加负边距来防止图像具有未定义的模糊边缘,但是在CSS转换期间,这会失败.在添加或删除过滤器模糊类时,如何保持CSS过渡期间定义的图像边缘?
测试中:
> Firefox 37:效果很棒!
> Chrome 42:图像和边框所在的位置
父元素满足图像闪烁/模糊/未定义
> IE9:没那么多……
看看我的例子:Codepen
HTML:
@H_502_17@
CSS:
@H_502_17@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:
@H_502_17@$(document).ready(function(){ $('img').hover(function(){ $(this).toggleClass('blur'); }); });
最佳答案
@H_502_41@当应用于处于HW加速模式的内容时,图像上的过滤器(以及一些动画和过渡)具有更好的结果.尝试强制浏览器使用该模式,最简单的方法是使用一些3d变换:
@H_502_17@.container img{ transform: translateZ(0.1px) }
见:http://codepen.io/ondrakoupil/pen/GJpaJo
现在很流畅(OS X上的Chrome 39)