CSS透明背景图像使用"数据:"

Question

我在一些网站上看到你可以使用"data"关键字在CSS中包含图像:

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

奇怪的代码看起来像base64 ecoded字符串,如:

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

看起来很酷:D

我想知道如何才能包含像这样的透明1x1像素GIF？有谁知道这样的图像的数据代码？

为小型和非常常见的图像做这个是一个好主意吗？所有浏览器都支持这个吗？

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== );