CSS Sprites技术的实际应用
css Sprites原理
CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位，background-position可以用数字能精确的定位出背景 图片的位置。
CSS Sprites优点
利用CSS Sprites能很好地减少了网页的http请求，从而大大的提高了页面的性能，这也是CSS Sprites最大的优点，也是其被广泛传播和应用的主要原因；
图1
图2
图３
在公司项目对按钮进行优化中得出一些经验
1、按钮图片不能过大，色彩不能过于复杂，如果色彩过于丰富在合并图片的时候会降低图片的质量，背景变得很粗糙，如图2这样的图片，我在优化按钮的时候将其合并到背景图上，就会使整个背景图片质量降低；
2、相同样式不同颜色的按钮，放在同一行或者同一列中，便于在css中定位，这样在css写background-position的时候只要改动一个坐标就OK了；
3、使用ps这个工具的时候，标尺一定要看清楚，标度的值在标度的下面，我就因为这样做了重复的劳动；
4、每一个系列的按钮要留一部分的空间，方便以后进行扩展，新加一些按钮或者改变一些按钮；
5、因为之前很多html页面里的按钮使用了img这样的标签，在对按钮优化的时候不得不大量地改动html里面的代码，为此多了很多的工作量；所以我们一开始在写页面的时候尽量少用img标签直接做按钮，可以采用文字的形式，如“搜索”，放在a标签之间，在css中定位a标签的背景（背景是按钮的图片）来实现按钮的效果，通过设置a标签的text-indent:-999em，这样在按钮中就看不见文字了，如果背景不包含文字就不需要设置这个属性了，通过设置font和color属性来实现按钮的文字效果；
６、图3这种背景一般用在新闻列表中，实际应用的时候列表的行高往往比背景中的序号要大，所以在背景合并图片中间距应该比一般按钮要大些，这样在页面中就不会将多余的按钮给显示出来；
以上是我在对按钮图片进行优化整合的时候的一点体会！如果有些不足或者需要补充的地方请留言！
CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位，background-position可以用数字能精确的定位出背景 图片的位置。
CSS Sprites优点
利用CSS Sprites能很好地减少了网页的http请求，从而大大的提高了页面的性能，这也是CSS Sprites最大的优点，也是其被广泛传播和应用的主要原因；
图1
图2
图３
在公司项目对按钮进行优化中得出一些经验
1、按钮图片不能过大，色彩不能过于复杂，如果色彩过于丰富在合并图片的时候会降低图片的质量，背景变得很粗糙，如图2这样的图片，我在优化按钮的时候将其合并到背景图上，就会使整个背景图片质量降低；
2、相同样式不同颜色的按钮，放在同一行或者同一列中，便于在css中定位，这样在css写background-position的时候只要改动一个坐标就OK了；
3、使用ps这个工具的时候，标尺一定要看清楚，标度的值在标度的下面，我就因为这样做了重复的劳动；
4、每一个系列的按钮要留一部分的空间，方便以后进行扩展，新加一些按钮或者改变一些按钮；
5、因为之前很多html页面里的按钮使用了img这样的标签，在对按钮优化的时候不得不大量地改动html里面的代码，为此多了很多的工作量；所以我们一开始在写页面的时候尽量少用img标签直接做按钮，可以采用文字的形式，如“搜索”，放在a标签之间，在css中定位a标签的背景（背景是按钮的图片）来实现按钮的效果，通过设置a标签的text-indent:-999em，这样在按钮中就看不见文字了，如果背景不包含文字就不需要设置这个属性了，通过设置font和color属性来实现按钮的文字效果；
６、图3这种背景一般用在新闻列表中，实际应用的时候列表的行高往往比背景中的序号要大，所以在背景合并图片中间距应该比一般按钮要大些，这样在页面中就不会将多余的按钮给显示出来；
以上是我在对按钮图片进行优化整合的时候的一点体会！如果有些不足或者需要补充的地方请留言！
