CSS прозрачное фоновое изображение с использованием «data:»

Question

Я видел на некоторых сайтах, что вы можете включать изображения в CSS, используя ключевое слово «data»:

.stuff {
  background: transparent url(data:image/gif;base64,SOMEWEIRDCODEHERE) repeat center top;
}

странный код выглядит как экранированная строка base64, например:

R0lGODlhMwAxAIAAAAAAAP /// yH5BAAAAAAALAAAAAAzADEAAAK8jI + pBr0PowytzotTtbm / DTqQ6C3hGX ElcraA9jIr66ozVpM3nseUvYP1UEHF0FUUHkNJxhLZfEJNvol06tzwrgd LbXsFZYmSMPnHLB + zNJFbq15 + SOf50 + 6rG7lKOjwV1ibGdhHYRVYVJ9Wn k2HWtLdIWMSH9lfyODZoZTb4xdnpxQSEF9oyOWIqp6gaI9pI1Qo7BijbF ZkoaAtEeiiLeKn72xM7vMZofJy8zJys2UxsCT3kO229LH1tXAAAOw ==

выглядеть довольно круто: D

1011 * Мне было интересно, как я могувключить прозрачный GIF 1x1 пикселей, как это?Кто-нибудь знает код данных для такого изображения?

Это хорошая идея сделать это для маленьких и очень распространенных изображений?Все ли браузеры поддерживают это?

Answer 1

Это называется Схема URI данных

Используйте Data URI Kitchen , чтобы преобразовать практически все в данные URI. Ссылка на сайт: http://software.hixie.ch/utilities/cgi/data/data

Answer 2

data:image/gif;base64,R0lGODlhAQABAPAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==

Ничего плохого в этом нет, вы сохраняете обратную передачу HTTP.Единственным недостатком является то, что он не работает в старых версиях IE (я полагаю, IE8 начал его поддерживать)

Answer 3

это прозрачный GIF в один пиксель

background-image: url( data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw== );

Answer 4

В зависимости от браузеров, которые вам нужны, вам может быть лучше использовать rgba().Я знаю, что этот вопрос немного старый.

body {
  background-color: rgba( 0, 0, 0, .5 ); 
}

Answer 5

Обновленная информация о поддержке браузером для URI данных:

http://caniuse.com/#feat=datauri