我正在尝试显示带有动画 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 中的错误?
最佳答案
在这种特殊情况下,以下修复了错误:
background-position: center;
这似乎是 Chrome 的问题,因为几天前背景 GIF 在 Chrome 中停止工作时我遇到了类似的问题。
看起来他们在 this release 中对背景渲染做了很多更改。 .
关于html - Chrome 动画 gif 背景图像无法播放 - 背景大小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39659592/