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

您可以添加額外的假字段中的數據URL迫使gif動畫重播：

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

Answer 2

很高興看到嵌入的趨勢base64編碼加載gifs正在起飛！

回到手頭的問題，你的背景聲明中有一個很常見的錯字fixed that for you。以下：

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

應該已經代替

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

認真不過，你可能只是編碼損壞的文件（並非不可能，如果你使用在線編碼工具）。

要解決這個問題，我先下載您已經嵌入到文件（右擊>觀察背景圖像>右擊>另存爲...在Firefox）。該圖片無法正確呈現：

有趣的是，當我將其上傳到SO imgur時，它在Finder文件預覽中看起來很好。損壞的索引？文件上傳過快終止？我對GIF格式的技術知識不夠了解，無法提供超出推測的洞察力，但我已經編碼了固定文件。

注：沒有必要使用引號url()