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

您可以向数据网址添加其他虚假字段以强制重播动画gif:

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