base64 编码的动画 gif 作为 css 背景? [英] base64 encoded animated gif as css background?

问题描述

我有一个动画 gif 编码到我的 css 中:

I have an animated gif encoded into my css as such:

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

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

This animated gif is encoded to play once.

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

However, once this animated gif plays once as background on an element, it never plays again. Using

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

没有效果——我们从 gif 的最后一帧开始.有什么想法可以在每次添加课程时从头开始播放吗?

Has no effect -- we start on the final frame of the gif. Any ideas how to make this play from the beginning every time the class is added?

不幸的是，另一个答案建议使用一些从服务器重新加载 gif随机 url 参数.唉，这对我的情况不起作用，因为我将图像编码到 css 本身中.您可以为 base64 数据添加随机日期戳吗?

Unfortunately, another answer suggests reloading the gif from the server using some random url parameters. Alas, this is not going to work for my case as I am encoding the image into the css itself. Can you add a random date stamp to base64 data?

推荐答案

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

You can add additional bogus fields to the data url to force replaying of the animated gif:

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

这篇关于base64 编码的动画 gif 作为 css 背景?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！