Question

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

FF和Edge工作正常吗？！

在chrome dev工具中使用background-size时，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中对背景渲染进行了很多更改。

Answer 2

您可以使用以下代码实现相同的功能。它在Chrome，FF和IE中运行良好

CSS

.thumbnail {
  background-position: -12px -14px;
  background-size: 150%;
  background-color: rgb(250, 252, 252);
  border-radius: 50%;
  border: 2px solid rgb(116, 200, 184);
  box-sizing: border-box;
  color: rgb(83, 181, 161);
  cursor: auto;
  display: block;
  filter: none;
  font-family: Ubuntu, sans-serif;
  font-size: 14px;
  height: 142px;
  line-height: 20px;
  margin: 12px;
  max-width: 100%;
  opacity: 0.5;
  overflow-x: hidden;
  overflow-y: hidden;
  padding: 5px;
  position: relative;
  width: 142px;
}

HTML：

<span><img class="thumbnail" src="https://media.giphy.com/media/xTiTnxd70rHICWIQSs/giphy.gif"></span>

试试这个：https://jsfiddle.net/hL2boada/11/

Chrome动画gif背景图片无法播放 - 背景尺寸

2 个答案: