9

次のようにCSSにエンコードされたアニメーションgifがあります。

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

このアニメーション GIF は、1 回再生するようにエンコードされています。

ただし、このアニメーション GIF が要素の背景として 1 回再生されると、二度と再生されません。使用する

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

効果はありません -- gif の最後のフレームから開始します。クラスが追加されるたびに、最初からこのプレイを行う方法はありますか?

残念ながら、別の回答では、ランダムな URL パラメータを使用してサーバーから gif をリロードすることを提案しています。残念ながら、画像を css 自体にエンコードしているため、これは私の場合にはうまくいきません。base64 データにランダムな日付スタンプを追加できますか?

4

2 に答える 2

12

偽のフィールドをデータ URL に追加して、アニメーション gif の再生を強制することができます。

//use date timestamp to ensure no duplicates
url(data:image/gif;bogus:ABCDEF;base64,R0lGODlhA...);
于 2012-09-01T14:55:46.730 に答える
3

base64エンコーディングされたロード GIFの埋め込みの傾向が始まっているのを見てうれしく思います!

手元の問題に戻ると、バックグラウンド宣言によくあるタイプミスがありましたが、それを修正しました。以下：

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

代わりにすべきだった

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

真剣に、破損したファイルをエンコードしただけかもしれません (オンラインのエンコード ツールを使用している場合は不可能ではありません)。

この問題をトラブルシューティングするために、最初にあなたが埋め込んだファイルをダウンロードしました ( Firefox では、右クリック > 背景画像を表示 > 右クリック > 名前を付けて保存... )。その画像も正しくレンダリングできませんでした:しません

おもしろいことに、 SO imgurにアップロードしたときに、Finder ファイルのプレビューで問題なく表示されました。壊れたインデックス？ファイルのアップロードがすぐに終了しましたか? GIF 形式の技術については推測を超えた洞察を提供できるほど十分に知りませんが、固定ファイルをエンコードしました。

注意:引用符を使用する必要はありませんurl()

于 2012-08-27T07:46:14.583 に答える