在开始之前，如果你还不知道 Data URI 是什么， 秦歌的这篇文章 可以帮上你。Data URI 在淘宝线上已经有了实例应用，更进步信息请查看 云谦的文章 。

好，回过头来说说 Data URI 「传统的」制作过程。由于 Data URI 需要使用 base64 编码，因此不得不自己写个小工具（熟悉 PHP 的话， 相信你会知道怎么做 ），然后再将编码后的字符加入到 CSS 文件中。

上述的步骤且不说繁琐，而且容易出错。 前几天 NCZ 推出了款名为 CSSEmbed 的自动化工具 。这个工具在上面的场合下可帮上大忙了。它能分析 CSS 文件中的图片地址，获取内容并将它 base64 后填充到对应的位置。

不过总想让工具变得更自动些，套用了下原先玉伯写的脚本，于是就有了下面的右键打包工具。

安装方法

https://friable.rocks/_/2009_11_04/1257322139.png

  1. 从这里下载 CSSEmbed 右键打包工具 ，解压缩
  2. 点击 install.cmd 安装
  3. 然后可以右键点击 sample.css 或者 sample-min.css 测试
  4. 最后生成的 _embed.css 结尾的文件就是我们想要的文件

呃，不好意思，有点罗嗦。

注意事项

  1. CSSEmbed 是用 Java 写的，所以它需要 Java 运行环境
  2. 务必确定 CSS 文件中的图片引用路径为绝对路径（ [在命令行中可以使用