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

Question

我有一个动画gif编码到我的CSS中：

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

这个动画gif被编码为播放一次。

然而，一旦这个动画gif在元素上播放一次作为背景，它就再也不会播放了。使用

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

没有效果 - 我们从gif的最后一帧开始。是否有任何想法如何在每次添加课程时从头开始播放？

不幸的是，another answer suggests使用一些随机url参数从服务器重新加载gif。唉，这对我的情况不起作用，因为我将图像编码到css本身。你能为base64数据添加随机日期戳吗？

Answer 1

您可以在数据网址中添加其他虚假字段，以强制重播动画gif：

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

Answer 2

很高兴看到嵌入base64 - 编码加载GIF 的趋势正在逐渐兴起！

回到手头的问题，你的背景声明fixed that for you中有一个非常常见的拼写错误。以下内容：

<德尔> base64,R0lGODlhEAAQAOMAAP///wAAAMLCwkJCQgAAAGJiYoKCgpKSkv/////////////////////...

应该是

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

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

要解决此问题，我首先下载了您已嵌入的文件（右键单击＆gt;查看背景图片＆gt;右键单击＆gt;另存为... 火狐）。该图片无法正确呈现：

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

NB：无需在url()

中使用引号