Question

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

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

只需使用transform，scale。

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

transform:scale(1.5);

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

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

请参阅更新的fiddle.

问候timmi

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转换为＆＃34; shake＆＃34;背景图片

3 个答案: