html - Chrome 动画 gif 背景图像无法播放 - 背景大小

Question

我正在尝试显示带有动画 gif 作为背景图像的缩略图按钮。但只有在 chrome 中，gif 才不会循环播放。

FF 和 Edge 运行良好？!

在 chrome 开发工具中使用背景大小时，gif 会以一定的百分比开始循环。

HTML

<span class="thumbnail"></span>

CSS

.thumbnail {
    background-position: -12px -14px;
    background-size: 150%;
    background-color: rgb(250, 252, 252);
    background-image: url(https://media.giphy.com/media/xTiTnxd70rHICWIQSs/giphy.gif);
    ...
}

我创建了一个 jsfiddle显示问题。

如果您创建第二个具有不同背景大小的缩略图，两个缩略图都有一个循环的 gif!？？？

有人知道为什么吗？ css有问题吗？或者这是 Chrome 中的错误？

Answer 1

在这种特殊情况下，以下修复了错误:

background-position: center;

这似乎是 Chrome 的问题，因为几天前背景 GIF 在 Chrome 中停止工作时我遇到了类似的问题。

看起来他们在 this release 中对背景渲染做了很多更改。 .