悬停时的背景大小转换会导致chrome"摇动"背景图像

Question

我试图实现我最近看到的效果,其中背景图像放大悬停.我几乎用这里的例子来做到这一点:https://jsfiddle.net/qyh6nbwt/但它看起来非常不稳定(你会理解我的意思是悬停在它上面),我在osx上运行最新的chrome版本,有尚未在其他浏览器中检查过它.有没有办法让它更顺畅,所以放大时不会"摇晃"？

HTML

<div id="example">
    test
</div>

CSS

#example {
   background-image: url(http://www.jeroenkemperman.nl/wp-content/uploads/2014/06/Johns_Inc_Pizza_Spaghetti_wikipediacommons.jpg);

    background-position: center center;
    width: 250px;
    height: 250px;
    transition:all 1000ms ease;
    background-size: 100% auto;
}

#example:hover {
    background-size: 160% auto;
}

Answer 1

只需使用变换，缩放。

所以不要将 bg 图像设置为 160% 使用

transform:scale(1.5);

您可以在此处找到有关转换 css 属性的一些信息

要在您的情况下使用变换比例，您将需要一个隐藏溢出的包装器，以便内部 div 变大并被外部 div 切割。

看到更新的小提琴。

问候蒂米