使用base64:url 来定义背景图片url

普通的背景图片css是这样的:

background-image:url(http://www.zhangxinxu.com/wordpress/wp-content/themes/default/images/zxx_dotted.gif);

这种方法是把图片存在某个路径下,然后请求该图片,请求图片的时候需要发送http请求.

使用base64:url来写背景图片css是这样的:

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

使用base64:url的本质就是,把图片通过base64编码,也就是说,编码就是图片,图片就是编码.就是说,把图片穿换成了一串字符.在这种情况下,不发送http请求,也不需要有实体的图片存在于某个路径下.

另外,不仅仅是图片,字体文件也可以使用base64编码

在fis中,图片路径后面若跟着?__inline,无论是在html中,css中,还是js中,这张图片都会被编译成base64编码:

编译前:

<img title="百度logo" src="modules/app/images/search_logo_big.gif?__inline"/>

编译后:

<img title="百度logo" src="data:image/gif;base64,R0lGO...Rw4ca8IcEplksZc3kmtgsQQgAADs=">

(注:由于这张图片比较大,所以编译后实际的base64编码非常长...)

详细的关于base64:url的说明请看:http://www.zhangxinxu.com/wordpress/?p=2341