开箱即用的图像。看来我不正确。如果有人可以帮助我，我将很高兴。谢谢你！在这里您可以找到演示
.box {
width:210px;
height:210px;
border-radius:50%;
border:3px solid yellow;
cursor: default;
overflow: hidden;
}
img{
overflow: hidden;
width:210px;
height:210px;
z-index:-1;
display: block;
position: relative;
-webkit-transition: all 0.6s ease-in-out;
-moz-transition: all 0.6s ease-in-out;
-o-transition: all 0.6s ease-in-out;
-ms-transition: all 0.6s ease-in-out;
transition: all 0.6s ease-in-out;
}
.box:hover img{
-webkit-transform: scale(2);
-moz-transform: scale(2);
-o-transform: scale(2);
-ms-transform: scale(2);
transform: scale(2);
}
看来问题仅在于webkit浏览器上。在发现边界半径属性使比例转换崩溃后，我进行了一些研究，发现了这一点
溢出：通过边框半径和CSS转换被隐藏（仅适用于Webkit）
您必须将-webkit-mask-image：放在父div上以解决此问题。
-webkit-mask-image: -webkit-radial-gradient(circle, white, black);
编辑：并且请注意，背景大小是昂贵的操作-请参阅“修订4”上的此文章。如果背景大小CSS属性减慢了您的网站http://kristerkari.github.io/adventures-in-webkit-土地/博客/ 2013/08/30 / fixing-a-parallax-scrolling-website-run-in-60-fps /
最后，您可以看到，使用scale（）CSS过渡方法放大图像比背景尺寸更平滑
EDIT2：http：//jsfiddle.net/Jx8xF/19/上的代码更新
在Safari 5.1.7，Chrome，Mozilla，IE10，Opera，Opera Next上测试
如您所见，只有第一次修复后才有问题的人才是Safari浏览器。对于他，你需要设置
-webkit-transform: translateZ(0);
这还不是全部。您需要将边界虫分为两层，并用另一个div包装。在代码中，您可以在HTML和CSS文件中看到完整的修复程序。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句