base64 encoded animated gif als CSS-Hintergrund?

Ich habe ein animiertes gif codiert in meine CSS als solche:base64 encoded animated gif als CSS-Hintergrund?

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

Dieses animierte gif einmal zu spielen ist codiert.

Sobald jedoch dieses animierte GIF einmal als Hintergrund auf einem Element spielt, wird es nie wieder abgespielt. Mit

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

Hat keinen Effekt - wir beginnen mit dem letzten Frame des Gif. Irgendwelche Ideen, wie man dieses Spiel von Anfang an jedes Mal macht, wenn die Klasse hinzugefügt wird?

Leider another answer suggests Laden Sie das gif vom Server mit einigen zufälligen URL-Parameter. Leider wird dies für meinen Fall nicht funktionieren, da ich das Bild in das CSS selbst kodiere. Können Sie Base64-Daten einen zufälligen Datumsstempel hinzufügen?

Quelle

2012-08-26 jedierikb

Ich dachte, dass der Browser zwingen, Redraw würde es tun, aber es scheint nicht. [jsFiddle] (http://jsfiddle.net/RichardTowers/nfajy/). – RichardTowers

Das Bild scheint während der Kodierung beschädigt zu sein oder wurde einfach als die Art gespeichert, die nicht wiederholt wird. –

Sie zusätzliche gefälschte Felder in den Daten url hinzufügen können wiedergebe des animierten GIF zu erzwingen:

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

Quelle

2012-09-01 14:55:46 jedierikb

Ich habe gerade festgestellt, dass dies in IE nicht funktioniert, es sei denn, Sie ersetzen den Doppelpunkt mit einem Gleichheitszeichen. z.B. URL (Daten: image/gif; Schein = ABCDEF; base64, R0lGODlhA ...); –

Froh, den Trend der Einbettung zu sehen base64 -kodierte loading gifs ist ausziehen!

Zurück zu dem Problem, gibt es einen ziemlich häufigen Tippfehler in Ihrer Hintergrunderklärung, fixed that for you. Die folgende:

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

sollte

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

Ernst aber stattdessen waren, haben Sie wahrscheinlich verschlüsselt nur eine beschädigte Datei (nicht unmöglich, wenn Sie ein Online-Encoding-Tool wurden unter Verwendung von).

das Problem zu beheben, habe ich zuerst die Datei, die Sie eingebettet heruntergeladen haben (rechts > Ansicht Hintergrund Bild klicken > rechts > auf Speichern unter ... auf Firefox). Das Bild konnte auch nicht korrekt gerendert werden: doesn't "spin"!

Lustig genug, sah es in Finder-Dateivorschau gerade gut aus, als ich es auf SO imgur hochladen wurde. Gebrochener Index? Datei-Upload wurde zu früh beendet? Ich weiß nicht genug über technische Details des GIF-Formats, um Einblicke zu bieten, die über Spekulationen hinausgehen, aber ich habe die feste Datei verschlüsselt.

NB: keine Notwendigkeit Anführungszeichen verwenden in url()

Quelle

2012-08-27 07:46:14

W I N N I N G! http://jsfiddle.net/ovfiddle/nfajy/16/ – Foxinni

base64 encoded animated gif als CSS-Hintergrund?

Antwort

Verwandte Themen