我正在使用带有背景图像的透明1x1图像,以便能够使用精灵并仍为某些图标提供替代文本。
我想为图像使用数据URI来减少HTTP请求的数量,但是 产生透明图像的最小字符串是 什么?
我意识到我可以使用数据URI:s代替实际的图片,但将所有内容保存在CSS中而不是分散放置时,维护起来会更容易。
在使用不同的透明GIF玩耍后,有些不稳定并会导致CSS故障。例如,如果您有一个<img>并且使用了最小的透明GIF,它可以正常工作,但是,如果您希望透明GIF具有一个background-image,那么这是不可能的。由于某些原因,某些GIF(例如以下代码)会阻止CSS背景(在某些浏览器中)。
<img>
background-image
较短(但不稳定-74字节)
data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==
我建议使用稍长且更稳定的版本,如下所示:
data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7
另一个提示是,不要遗漏image/gif一个评论。这将在多个浏览器中中断。
image/gif