base64编码的gif动画的CSS背景？(base64 encoded animated gif

我有一个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编码过负荷的GIF起飞！

回到手头的问题，在你的背景声明那里`s很常见错字， 固定为你 。 下列：

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

本来应该代替

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

说正经的，你可能只是（如果你使用在线编码工具并非不可能）编码损坏的文件。

要解决这个问题，我先下载你嵌入（ 右键单击>视图背景图片>右键单击>另存为...在Firefox）的文件。 该图像不能正确渲染之一：

有趣的是，当我被上传到看着在Finder中的文件预览就好SO imgur 。 残破的指数？ 文件上传太早结束的？ 我不知道有足够的了解GIF格式提供洞察超越炒作的技术问题，但我已经编码的固定文件。

注：没有必要使用引号中url()

文章来源: base64 encoded animated gif as css background?