CSS透明背景图片

我看到一些网站上，你可以包括使用“数据”关键字CSS图片：CSS透明背景图片

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

怪异的代码看起来像一个base64 ecoded串：

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

看起来很酷：d

我想知道我怎么可以包括透明的1x1像素的GIF这样吗？有谁知道这种图像的数据代码？

对于小而常见的图像来说这是一个好主意吗？所有浏览器都支持吗？

来源

2011-04-07 Alex

除非有什么我不知道，没有理由使用spacer gif作为CSS背景图像。 – 2011-04-07 21:50:52

嗨，本。我试图让行号在这里无法选择：http://jsfiddle.net/rVwqR/ – Alex 2011-04-07 21:51:58

只是通过CSS阻止这样的选择;没有背景图片需要：http://stackoverflow.com/questions/826782/css-rule-to-disable-text-selection-highlighting/4407335#4407335 – 2011-04-07 21:53:58

这就是所谓的The data URI scheme

使用数据URI厨房转换几乎任何数据的URI。链接： http://software.hixie.ch/utilities/cgi/data/data

来源

2011-04-07 21:47:38 Shaz

我试图转换一个图像，我得到一个空白页面 – Alex 2011-04-07 22:03:22

@Alex：是的，那是因为图像是透明的？无论哪种方式，一旦你转换，复制地址栏中的网址。应该从'data'开始。 – Shaz 2011-04-07 22:04:37

啊我现在看到了，但生成的代码很大：http：// jsfiddle。净/ rSzfd /：X – Alex 2011-04-07 22:08:21

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

没有错，这样做，可以节省一个HTTP往返。唯一的缺点是，它并没有在旧版本的IE浏览器的工作（IE8，我相信，开始支持它）

来源

2011-04-07 21:48:30

它显示白色背景。我怎样才能让它透明？ – Alex 2011-04-07 22:03:03

对不起，更新了它。 – 2011-04-07 22:19:07

谢谢，这工作。 – dsomnus 2014-01-30 17:47:31

这是一个像素

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

来源

2012-05-18 05:21:39 rushkeldon

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

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

来源

2013-09-26 11:04:03 callum

取决于你需要支持，你可能会更好使用rgba()浏览器。我知道这个问题有点老。

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

来源

2013-09-26 11:13:50

CSS透明背景图片

回答

相关问题