Web 技术研究所

我一直坚信着,Web 将会成为未来应用程序的主流

BASE64和CSS中使用BASE64图片

  在说这个BASE64图片之前,首先来普及一下知识。BASE64到底是什么?如果你知道16进制是什么,那就很容易理解BASE64。BASE64其实就是把数字转换成了64进制。计算机处理数据的时候,最终都是以数字的形式来处理的,既然是数字就可以转换进制,所以任何数据都可以用BASE64来表示。图片的数据一般是放在图片文件中的,这样图片数据的最小单位就是字节。字节是什么?字节就是一个0-255的数字。这就意味着,图片作为文件被保存的时候实际上就是256进制的。而256进制直接转换成能理解的形式显然不太可能,我们没有那么多字符。16进制中,10-15的数用A-F来表示。64进制也是同样的道理,使用了字母和数字来表示。但是26个字母算上大小写也就52个,加上10个数字才62个。我们需要再加两个字符,才能表示64进制。在BASE64中使用了“+”和“/”这个两个字符。在标准的BASE64算法中,数据是每3个字节来处理的。因为三个字节也就是2563,它刚好会等于4为64进制,也就是644,这样就可以把每3位的256进制转换成4位的64进制。但是一个文件的字节数未必是3的倍数,所以最后缺字节的地方,需要补上“=”号。这是标准BASE64的规定。
  说了一大堆,其实把图片转换成BASE64的工作不需要自己写程序转换。现成的程序有好多,比如这个网站就可以在线把图片转换成BASE64。这个图片当然越小越好,一般使用PS把图片保存成最小格式再去转换。现在,我需要一个网格的背景,我就可以做一个很小的图片
   ← 这货是一张图片,由于很小,别看丢了。。
  把这个图片转换成BASE64 R0lGODlhCgAKAIAAAMzMzP///yH5BAAAAAAALAAAAAAKAAoAAAIRhI8Qy6zdHlxyVnjjdJv2UAAAOw==   现在,在CSS中使用这个BASE64图片平铺就可以得到网格了。 <style>
body {background:url(data:image/gif;base64,R0lGODlhCgAKAIAAAMzMzP///yH5BAAAAAAALAAAAAAKAAoAAAIRhI8Qy6zdHlxyVnjjdJv2UAAAOw==)}
</style>

  在data:image/gif;base64,的后面接上BASE64图片的数据就可以被解析成图片了。前面的data:是表示后面跟的是数据而不是URL,接着是image/gif,这个是数据的MIME头,以分号结束。接着是编码类型base64以逗号结束,最后就是数据了。使用这个方法对付一些小而又需要平铺的图片非常好。但是它对IE6不兼容,如果网站不需兼容IE6就可以使用这个方法来节省很多次HTTP请求。
网名:
34.203.213.*
电子邮箱:
仅用于接收通知
提交 悄悄的告诉你,Ctrl+Enter 可以提交哦
神奇海螺
[查看全部主题]
各类Web技术问题讨论区
发起新主题
本模块采用即时聊天邮件通知的模式
让钛合金F5成为历史吧!
次碳酸钴的技术博客,文章原创,转载请保留原文链接 ^_^