css - 动画背景大小在最新版本的 Chrome 中无法正常运行

Question

我偶然发现了一个有趣的错误，即在最新版本的 Chrome 中，动画背景大小没有考虑到过渡。它似乎在 Safari、Firefox 和 Internet Explorer 中运行良好。

background-size: 100%
transition: background-size 0.5s

  &:hover
    background-size: 150%
    transition: background-size 0.5s

Here's a link to a codepen

Answer 1

尝试添加一个新元素，然后为该元素添加背景
添加 overflow:hidden 到父元素
悬停缩放子元素

喜欢

<div class="parent">
  <div class="child">
    </div>
</div>

.child { height:400px;width:200px;background:url....;transition:0.5s}
.parent { overflow:hidden;}
.parent:hover .child { transform:scale(1.5)}

或者你可以使用伪元素，比如 :before

.parent { overflow:hidden;}
.parent:before { width:100%;height:100%;content:"";position:absolute;top:0;background:url....;transition:0.5s } 
.parent:hover:before { transform:scale(1.5)}

这是一个 jsfiddle与第二种解决方案
第一个解决方案也有效。你选择:)