base64编码的动画gif作为css背景？

Question

我有一个动画 GIF 编码到我的 CSS 中，如下所示：

.magicBg {
    background-image: url(data:image/gif;base64,R0lGODlhAQBkAPcAAAAAAAEBAQICAgMDAwQEBAUFBQYGBgcHBwgICAkJCQoKCgsLCwwMDA0ND...);
}

此 GIF 动画经过编码可播放一次。

但是，一旦此动画 GIF 作为元素的背景播放一次，就不会再播放。使用此代码：

$('body').removeClass('magicBg');
$('body').addClass('magicBg')

没有任何效果——我们从 GIF 的最后一帧开始。 有什么想法如何在每次添加课程时从头开始玩这个游戏吗？

不幸的是，另一个答案建议使用一些随机 url 参数从服务器重新加载 GIF。 唉，这不适用于我的情况，因为我将图像编码到 CSS 本身中。 您可以为 Base64 数据添加随机日期戳吗？

Answer 1

您可以向数据 URL 添加额外的虚假字段以强制重播动画 gif：

//use date timestamp to ensure no duplicates
url(data:image/gif;bogus:ABCDEF;base64,R0lGODlhA...);

Answer 2

很高兴看到嵌入

base64

编码 加载 gifs 的趋势正在兴起！

回到当前的问题，您的背景声明中有一个非常常见的拼写错误，已为您修复了该问题。以下：

base64,R0lGODlhEAAQAOMAAP///wAAAMLCwkJCQgAAAGJiYoKCgpKSkv/////////////////////...

本来应该是

base64,R0lGODlhEAAQAPIAAP///wAAAMLCwkJCQgAAAGJiYoKCgpKSkiH/C05FVFNDQVBFMi4wAwE...

说实话，您可能刚刚编码了一个损坏的文件（如果您使用在线编码工具，这并非不可能）。

为了解决此问题，我首先下载了您嵌入的文件（右键单击 > 查看背景图像 > 右键单击 > 另存为... 在 Firefox 上）。该图像也无法正确渲染：

有趣的是，当我将其上传到 SO imgur 时，它在 Finder 文件预览中看起来很好。索引坏了？文件上传太快终止？我对 GIF 格式的技术细节了解不够，无法提供超出猜测的见解，但我已经对固定文件进行了编码。

注意： 无需在

url()

中使用引号