悬停时的背景大小转换导致 chrome 到 "shake" 背景图像

Question

我正在尝试实现我最近看到的一种效果，即悬停时背景图像会放大。我几乎是用这里的例子来做的：https://jsfiddle.net/qyh6nbwt/ 但它似乎很不稳定（你会通过将鼠标悬停在它上面来理解我的意思），我在 osx 运行最新 chrome版本，其他浏览器还没查。有没有办法让它更平滑，这样它就不会 "shake" 放大？

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

只需使用变换、缩放。

所以不要将背景图像设置为 160%，而是使用

transform:scale(1.5);

一些关于转换的信息css 属性你可以找到here

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

查看更新fiddle.

问候蒂米

Answer 2

使用变换比例而不是背景大小更改过渡：https://jsfiddle.net/qyh6nbwt/

transform: scale(2, 2);

Answer 3

所以我把解决这个问题作为我的使命，结果发现它并不像我想的那么简单。

它有点脏，但你需要像这样在 div 中构建你的 div：

<div class="example">
    <div></div>
    <p>test</p>
</div>

然后从这里，您可以更准确地定位缩放，如下所示：

div.example {
    height: 250px;
    width: 250px;
    overflow: hidden;
    position: relative;
}

div.example > div {
    position: absolute;
    height: 100%;
    width: 100%;
    -moz-transition: all 1.5s;
    -webkit-transition: all 1.5s;
    transition: all 1.5s;
    -moz-transform: scale(1,1);
    -webkit-transform: scale(1,1);
    transform: scale(1,1);
    background-image: url('http://www.jeroenkemperman.nl/wp-content/uploads/2014/06/Johns_Inc_Pizza_Spaghetti_wikipediacommons.jpg');
    -moz-background-size: cover;
    -webkit-background-size: cover;
    background-size: cover;
    z-index: -1;
}

div.example:hover > div {
    -moz-transform: scale(2,2);
    -webkit-transform: scale(2,2);
    transform: scale(2,2);    
}

您可以使用 scale 和 transition 属性调整缩放和速度。

这里有一个有效的fiddle来演示。希望这有帮助，我检查了 Chrome/Safari/Firefox，它似乎工作得很好。

悬停时的背景大小转换导致 chrome 到 "shake" 背景图像

background-size transition on hover causes chrome to "shake" background image

css

background-image

transition

background-size