css фон
В этом уроке я расскажу как сделать CSS фон кодированный в base 64, а потом добавить в файл CSS. Есть много онлайн сервисов для кодировки, например этот.
Итак, берем изображение будущего CSS фона, я взял это
(размер 28х28 px)и оправил прямиком на http://www.dailycoding.com. Там всего одна кнопка, не ошибетесь, ничего лишнего.
И получил на выходе вот это:
Далее я использую вставку этого кода в файл CSS, я использую body, вы можете использовать любой другой элемент.
И еще один пример:
Данный метод не работает в Internet Explorer 5, 6 и 7, но есть костыль для решения данной проблемы.
Итак, берем изображение будущего CSS фона, я взял это
(размер 28х28 px)и оправил прямиком на http://www.dailycoding.com. Там всего одна кнопка, не ошибетесь, ничего лишнего.И получил на выходе вот это:
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Это и есть мое кодированное изображение.
Далее я использую вставку этого кода в файл CSS, я использую body, вы можете использовать любой другой элемент.
body
{
background:url(data:image/png;base64,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);
}
И получаю фон CSS с использование base 64:И еще один пример:
Данный метод не работает в Internet Explorer 5, 6 и 7, но есть костыль для решения данной проблемы.
css фон