悬停时的背景尺寸转变导致铬“摇晃”背景图 [英] background-size transition on hover causes chrome to "shake" background image

问题描述

我想实现我最近看到的一个效果，其中背景图片放大悬停。我几乎用这里的例子： https://jsfiddle.net/qyh6nbwt/ 但它似乎很不稳定（你会理解我的意思是悬停在它），我在osx运行最新的chrome版本，还没有检查它在其他浏览器。
有一种方法可以使它更平滑，所以它不会在放大时摇动。

I am trying to achieve an effect I saw recently, where background image zooms on hover. I pretty much did it with example here: https://jsfiddle.net/qyh6nbwt/ but it seems to be very shaky (you will understand what I mean by hovering over it), I'm on osx running latest chrome version, have not checked it in other browsers yet. Is there a way to make it smoother, so it doesn't "shake" on zoom in?

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

推荐答案

所以只是将bg图片设置为160％。

so just instead of setting the bg image to 160% use

transform:scale(1.5);

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

some information about the transform css property you can find here

在您的情况下使用变换缩放比例

to use the transform scale in your case you will need a wrapper with overflow hidden so just the inner div gets bigger and cut of by the outer div.

查看更新小提琴

问候timmi

这篇关于悬停时的背景尺寸转变导致铬“摇晃”背景图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！