HTML/CSS/JS 在悬停时显示 gif，究竟什么是 gif？答案

【问题标题】：HTML/CSS/JS Show gif on hover, what exactly is a gif?HTML/CSS/JS 在悬停时显示 gif，究竟什么是 gif？
【发布时间】：2016-04-04 23:11:17
【问题描述】：

我有很多 div 元素要拉，每个元素都有一个背景图像。然而，有些元素代表一个 gif，当我将鼠标悬停在它们上时，我希望播放 gif 并在鼠标退出时让它停止或重置。

我看到很多带有图像标签的 gif 动画示例，但我似乎无法让它与背景图像一起使用。

因此，对于每个图像，我都有 gif 的起始图像以及完整内容的 .gif 扩展名。

我在这里阅读这个问题以供参考：Start GIF On Mouse Hover and Pause Otherwise?

这让我想到了我的问题：什么是 gif？

它是“动画”的小图像集合吗？我看到很多“图像切片”术语或有多个图像循环通过以模拟动画。但是是否可以通过 html/css/js 仅使用起始图像和 .gif url 显示 gif？

$container.on('mouseenter', ".gif", function (event) {
        var target = event.target;
        var $target = $(target);

        //play gif
        $target.css("background-image", "url(" + theGIFurl + ")");
    });

.item gif{

  background-image: url(theJPGurl); /

}

【问题讨论】：

ajaxload.info | preloaders.net
与问题无关
使用“gif”格式的图像文件可以在文件中包含 1 个或多个图像。在文件有多个图像的情况下，理解这一点的程序（例如大多数浏览器）会遍历一系列图像。没有什么好的方法可以控制浏览器中的这种循环，所以如果你想要“动画”视图和静态视图，你需要有 2 个图像文件（一个静态和一个动画）并在它们之间切换。
@Pipeline 你问，“什么是 gif？”
您应该能够毫无问题地将 GIF 设置为带有 HTML 或 CSS 的背景图像。但是，没有可靠的跨浏览器解决方案来播放/停止它们。我们能否获得更多关于您正在尝试做的事情的背景信息？

标签： javascript html css image gif

【解决方案1】：

gif 是一种位图图像。它曾经非常流行，因为它可以具有透明像素（与 jpg 相比）。但在这方面它被 png 取代，它通常更小，支持 alpha 透明度（其中 gif 像素要么完全透明，要么完全不透明），最重要的是，gif 图像被限制为 256 色。

gif 图像的另一个壮举是它们的动画。您可能从显示旋转信封或其他东西的旧网站上知道它们。

动画 gif 图像只是组合在单个文件中的图像集合。这样的文件还包含文件中的附加时序信息。但是，gif 图像并不是可以控制的智能对象。您不能使用 JavaScript 启动、停止、暂停或加速 gif 图像。它只包含帧，可以循环或不循环，但所有信息都在文件中。

因此，虽然您可以使用 JavaScript 或 CSS 通过显示不同的图像来制作动画，但这与仅显示动画 gif 是一种不同的技术。所以，也许最好研究其他技术。虽然 gif 基本上非常简单，但它们的使用也非常有限。例如，您无法可靠地计时脚本以运行 gif 动画的结尾。

-编辑-

显然你可以（在 FireFox 中）pause a gif file。

【讨论】：

所以仅仅通过拥有起始帧的图像以及 .gif url 就不可能在浏览器中显示 gif？
不容易，但有了the right library，你可能会到达那里
值得注意的是PNGs can be animated too，尽管目前只有 Safari 和 Firefox 提供稳定的原生支持，而GIFs can have more than 256 colors，正如an example from Wikipedia 所证明的那样。
@Siguza 真的。在动画 gif 中，帧只是相互覆盖，当像素透明时，前一帧可见。 256 色限制实际上是每帧，因此使用一个技巧，您可以在动画中没有时间将图像分解为多个帧，并且每个帧都有一个自定义调色板，其中包含准确所需的颜色部分。这是可能的，但您需要专门的软件，因此您将拥有一个巨大的图像。动画 PNG 会很好，但即使标准已经 8 岁，支持也很差。不过，很高兴提及。

【解决方案2】：

$container.on('mouseenter', ".gif", function (event) {
        var target = event.target;
        var $target = $(target);

        //play gif
        $target.css("background-image", "url(" + theGIFurl + ")");
    });

.item gif{

  background-image: url(theJPGurl); /

}

$container.on('mouseenter', ".gif", function (event) {
        var target = event.target;
        var $target = $(target);

        //play gif
        $target.css("background-image", "url(" + theGIFurl + ")");
    });

.item gif{

  background-image: url(theJPGurl); /

}

【讨论】：

这只是复制我在 OP 中的内容

【解决方案3】：

如果有人可以发表评论，我确实找到了解决此问题的示例：

http://codepen.io/anon/pen/qbqvgy

div {
  width: 500px;
  height: 500px;
  background: url('http://2.bp.blogspot.com/-CmBgofK7QzU/TVj3u3N1h2I/AAAAAAAADN8/OszBhGvvXRU/s640/tumblr_lg7h9gpbtP1qap9qio1_500.jpeg');
}

div:hover {
  background: url('https://media.giphy.com/media/V1T2JBmK03OFy/giphy.gifs');
}

<div>
</div>

【讨论】：