3

次のように、.css ファイル内に gif ファイルを読み込もうとしています。

li.box_entry {
  background-image: url(data:image/gif;base64,R0lGODlhDAANANUAAPv7+/r6+vn5+ff39/b29vX19fPz8/Dw8O/v7+7u7u3t7ezs7Onp6ejo6Ofn5+bm5uTk5OPj4+Hh4eDg4N/f397e3tzc3Nvb29ra2tnZ2dbW1tXV1dPT09LS0tHR0c3NzcjIyMfHx8bGxsXFxby8vLe3t7W1tbOzs62traurq6mpqaioqKenp6ampqWlpaOjo6KioqGhoaCgoJ+fn5qampmZmf///wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAUUADYALAAAAAAMAA0AAAZxQJtwyGYrVaLEQswGYWAOAygxWELxaFwCVUWi/bRyZaJM5nUezjInkcjHi8U2rVNhmJY++QZDg0NBgTExEPhxJ+NCogDY6PjiMqGisLCJeYDTIaNikmCgOhAwgnKUICKCsdBgYdMSgCRBgogSgZQ0EAOw==);
  background-repeat: no-repeat;
}

gif 画像は、 http://www.motobit.com/util/base64-decoder-encoder.aspを使用して base64 でエンコードされてい ます。

通常の方法で画像をリンクすると、正常に動作します。

li.box_entry {
  background-image: url(images/dot.gif);   background-repeat: no-repeat;
}

ただし、これは小さなファイルであり、HTTP 要求を減らしたいと考えています。そのため、base64 エンコーディングのためにファイルが大きくなりますが、CSS ファイルに正しくロードしようとしています。

次の例のように、インライン画像は HTML 内で問題なく動作します。

<a href="index.php?mod=home&amp;language=es"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAABmJLR0QA/wD/AP+gvaeTAAAACXBI
WXMAAAsTAAALEwEAmpwYAAAAMklEQVR42mP8//8/AzUBEwOVweA3kPE/A8P/keVlFup6eEQmmxFo
IAsD48grHEZcAQsAaegJIuin2YEAAAAASUVORK5CYII=" alt="es" title="Español" width="20" height="20" border="0" /></a>

このページによると、これは CSS ファイルでも機能するはずです: http://www.websiteoptimization.com/speed/tweak/inline-images/

ただし、Google Chrome と Firefox でテストしましたが、そうではありませんでした。

何か不足していますか？

私が取り組んでいるページは次のとおりです: http://lansuite.orgapage.de 左下隅のフラグは既にインライン HTML として機能していますが、ページ全体に灰色/黄色のドットが複数回表示されています。そのため、インライン HTML として記述することはお勧めできません。CSS ファイルで一度だけグラフィックを定義し、画像が必要になるたびに適切なクラスをロードしたいと考えています。

4

2 に答える 2

1

問題はbase64エンコーダーにあることがわかりました:-/

私は今これを使用しました.gif画像用に異なるコードを生成し、それが機能しました: http://www.opinionatedgeek.com/dotnet/tools/base64encode/

返信用の戦車！

于 2010-07-02T23:13:00.107 に答える
1

これを必ず読んでください。トピックの多くの側面をカバーしています (IE サポートなど)。

于 2010-07-02T22:28:21.083 に答える