小编典典

透明图像可能的最小数据URI图像

css

我正在使用带有背景图像的透明1x1图像,以便能够使用精灵并仍为某些图标提供替代文本。

我想为图像使用数据URI来减少HTTP请求的数量,但是 产生透明图像的最小字符串是 什么?

我意识到我可以使用数据URI:s代替实际的图片,但将所有内容保存在CSS中而不是分散放置时,维护起来会更容易。


阅读 1670

收藏
2020-05-16

共1个答案

小编典典

在使用不同的透明GIF玩耍后,有些不稳定并会导致CSS故障。例如,如果您有一个<img>并且使用了最小的透明GIF,它可以正常工作,但是,如果您希望透明GIF具有一个background-image,那么这是不可能的。由于某些原因,某些GIF(例如以下代码)会阻止CSS背景(在某些浏览器中)。

较短(但不稳定-74字节)

data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==

我建议使用稍长且更稳定的版本,如下所示:

⇊稳定⇊(但稍长-78个字节)

data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7

另一个提示是,不要遗漏image/gif一个评论。这将在多个浏览器中中断。

2020-05-16