jquery - 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。las，这不适用于我的情况，因为我将图像编码到 css 本身。你可以为base64数据添加一个随机日期戳吗？

score 12 · Accepted Answer

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

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

score 3 · Accepted Answer

很高兴看到嵌入base64编码加载 gif的趋势正在起飞！

回到手头的问题，你的背景声明中有一个很常见的错字，为你解决了这个问题。以下：

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

应该是

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

不过说真的，您可能只是对损坏的文件进行了编码（如果您使用的是在线编码工具，这并非不可能）。

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

有趣的是，当我将它上传到SO imgur时，它在 Finder 文件预览中看起来还不错。破指数？文件上传过早终止？我对 GIF 格式的技术知识知之甚少，无法提供超出推测的见解，但我已经对固定文件进行了编码。

注意：不需要在url()

2 回答 2