base64编码动画gif作为CSS背景？

我有一个动画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 -encoded 加载GIF的趋势正在起飞！

回到手头的问题，你的背景声明中有一个相当常见的拼写错误，为你解决了这个问题 。 下列：

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

本来应该是

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

但是说真的，你可能只编写了一个损坏的文件（如果你使用的是在线编码工具，那就不是不可能了）。

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

有趣的是，当我将它上传到SO imgur时，它在Finder文件预览中看起来很好。 破指数？ 文件上传太快了？ 我不太了解GIF格式的技术性，以提供超出推测的洞察力，但我编码了固定文件。

注意：不需要在url()使用引号