Встроенные изображения в CSS с background-image: url ()

Я пытаюсь загрузить файл GIF в моем файле.css, например так:

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-изображение кодируется в формате base64 с использованием http://www.motobit.com/util/base64-decoder-encoder.asp

Это работает нормально, если я связываю изображение обычным способом:

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

Тем не менее, это всего лишь небольшой файл, и я хочу уменьшить HTTP-запросы, поэтому я пытаюсь загрузить его прямо в файл CSS, что должно быть быстрее, хотя размер файла увеличивается из-за кодировки base64.

Встроенные изображения прекрасно работают в 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 и загружать соответствующий класс каждый раз, когда мне нужно изображение.

Источник

2 ответа

Решение

Только что выяснил, проблема была в кодировщике base64:-/

Теперь я использовал этот, он создал другой код для изображения GIF, и это сработало: http://www.opinionatedgeek.com/dotnet/tools/base64encode/

Танки за ответы!

Источник

Обязательно прочитайте это до конца. Он охватывает много аспектов темы (например, поддержка IE).

Источник
Другие вопросы по тегам