CSS中，background可以设置对象的背景样式。如颜色或者使用一张图片代替，今天我要多说两句的就是使用一张图片的参数：image。准确的来说应该是background-image。我们可以这样用它：

body{
background-image: url(....jpg);
}

也可以直接使用background 代替：

body{
background: url("....jpg");
}

css显示图片分3种：
1. 单纯的显示一个图片；
2. CSS Sprites，也就是说把若干小图片合成一个大图片，然后通过background的postion参数实现效果，
3. Inline images。这个方法不适用于IE浏览器。

CSS Sprites是一种把所有的图片都以base64编码以源代码的形式写在CSS文件里，格式是这样的：data:[][;base64],

data:URL标签是在1995年第一次提出，按RFC2397规范（ http://tools.ietf.org/html/rfc2397 ）的描述：

allows inclusion of small data items as ‘immediate’ data.

（允许在页面中包含一些小的即时数据）

如一个内嵌的的图片可以这样引用：

{  background-image:url(data:image/gif;base64,R0lGODlhCAAIAJEAAOnp6eTk5O7m8AAAACH5BAEAAAIALAAAAAAIAAgAAAINjAMJh2q6DnxOVsqmLQA7);  }

这段代码可以在firefox浏览器运行。这行代码的意思是，gif格式的以base64编码成最后的字符串的图片应用为背景。样式应用的结果是一种斜条纹状的背景。

参考：http://tjrus.com/blog/base64-vs-css-sprites-battle-for-performance
参考：http://stackoverflow.com/questions/1124149/is-embedding-background-image-data-into-css-as-base64-good-or-bad-practice

CSS Sprites与base64图片编码的比较

在前端页面性能优化的时候，不可避免地会遇到这个问题。我们又该如何选择呢？

情景：有数量相当的小size图片

方案1：使用CSS Sprites合并为一张大图
方案2：使用base64直接把图片编码成字符串写入CSS文件

针对方案1：

1.兼容性比较好
2.图片比较复杂时构造体积较小
3.多处重用时无需重复图形内容
4.没有base64编码成本，降低图片更新的维护难度。（但注意Sprites同时修改css和图片某些时候可能造成负担）

针对方案2：

1.无额外请求
2.对于极小或者极简单图片来说数据很少
3.可以被gzip。（通过gzip对base64数据的压缩能力通常和图片文件差不多或者更强）
4.降低css维护难度
5.可像单独图片一样使用，比如背景图片重复使用等
6.没有跨域问题，无需考虑缓存、文件头或者cookies问题。

方案1+方案2能否实现呢？思考了下，不可以。