在开始之前,如果你还不知道 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 文件中的图片引用路径为绝对路径( [在命令行中可以使用