css - 悬停时背景大小转换导致 chrome 变为 "shake"背景图像

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);

您可以找到有关 transform css 属性的一些信息 here

要在您的情况下使用变换比例，您需要一个 overflow hidden 的包装器，这样内部 div 就会变大并被外部 div 切掉。

查看更新 fiddle.

问候提米