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播放一次作为一个元素的背景，

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?

不幸的是，另一个答案建议使用一些随机的url参数从服务器重新加载gif。唉，这不会为我的情况下工作，因为我编码的图像到CSS本身。

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?

推荐答案

您可以向数据网址添加额外的虚假字段，以强制重播动画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屋！