Image CSS透明背景图像使用；数据：“；

我在一些网站上看到，您可以使用“数据”关键字在CSS中包含图像：

奇怪的代码看起来像base64 ecoded字符串，如下所示：

r0lgodlhmwasaaaap/// YH5BAAAAAAAZADEAAK8JI+PBR0POWYTZOTTBM/DTqQ6C3hGX ElcraA9jIr66ozVpM3nseUvYP1UEHF0FUUHkNJxhLZfEJNvol06tzwrgd LbXsFZYmSMPnHLB+zNJFbq15+SOf50+6RG7LKOJWv1IBGDHHYRVJ9WN K2HWTLDIWMSH9LFYODZOZTB4XDNPXSEF9OYOWIQP6GAI9PI1QO7BIKBF ZKOAATEEILEKN72XM7VMZOFJY8ZJYS2UXSCT3KO229LH1TXAAOW==

看起来很酷：D

我想知道怎样才能包含这样的透明1x1像素GIF？有人知道这种图像的数据代码吗

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

这称为

使用数据URI厨房将任何内容转换为数据URI。链接：

---

这样做没什么错，可以节省HTTP往返。唯一的缺点是它在旧版本的IE中不起作用（我相信IE8已经开始支持它）

这是一个一像素的透明GIF

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

---

数据URI的最新浏览器支持详细信息：

---

根据需要支持的浏览器，您最好使用

rgba（）。我知道这个问题有点老了

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

除非有什么我不知道的，否则没有理由使用间隔gif作为CSS背景图像。嗨，本。我试图使这里的行号不可选择：只是防止通过CSS这样选择；不需要背景图像：谢谢，但在operaSee中也不起作用@Alex:是的，那是因为图像是透明的不？无论哪种方式，转换后，请复制地址栏中的url。应该从
data
@Alex开始：如果您想使用Base64，请确保在我上面链接的页面上选中了
Base64
（通常比未选中时给出的要短）；）谢谢它仍然很大，但我删除了photoshop添加的元数据，现在它变小了。但我只能在FF和chrome中禁用此图像下的选择。Opera仍然可以选择：x
background-image: url( data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw== );

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