使用“数据：”的 CSS 透明背景图像

Posted 2023-03-06

【中文标题】使用“数据：”的 CSS 透明背景图像

【英文标题】：CSS transparent background image using "data:"

【发布时间】：2011-08-01 01:50:27

【问题描述】：

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

.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

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

对小且非常常见的图像执行此操作是否是个好主意？所有浏览器都支持吗？

【问题讨论】：

除非有什么我不知道的，否则没有理由使用间隔 gif 作为 CSS 背景图像。

嗨，本。我正在尝试使此处的行号无法选择：jsfiddle.net/rVwqR

只是防止通过 CSS 进行这样的选择；无需背景图片：***.com/questions/826782/…

谢谢，但在歌剧中不起作用

另见smallest filesize for transparent single pixel image

【参考方案1】：

那叫The data URI scheme

使用 Data URI Kitchen 将几乎所有内容转换为数据 uri。关联： http://software.hixie.ch/utilities/cgi/data/data

【讨论】：

@Alex：是的，那是因为图像是透明的，不是吗？无论哪种方式，一旦转换，请复制地址栏中的 url。应该以data开头。

@Alex：如果您想使用 Base64，请确保在我上面链接的页面上 选中 Base64（如果未选中，它通常比通常提供的更短);)

谢谢。它仍然很大，但我删除了 Photoshop 添加的元数据，现在它很小。但我只能在 FF 和 chrome 中禁用此图像下的选择。 Opera 仍然可以选择 :x

【参考方案2】：

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

这样做没有错，您节省了 HTTP 往返行程。唯一的缺点是它在旧版本的 IE 中不起作用（我相信 IE8 开始支持它）

【参考方案3】：

这是一个像素的透明 GIF

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

【参考方案4】：

根据您需要支持的浏览器，您最好使用rgba()。我知道这个问题有点老了。

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

【参考方案5】：

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

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