CSS Sprites技术的实际应用(图)

　　css Sprites原理

　　CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位，background-position可以用数字能精确的定位出背景 图片的位置。

　　CSS Sprites优点

　　利用CSS Sprites能很好地减少了网页的http请求，从而大大的提高了页面的性能，这也是CSS Sprites最大的优点，也是其被广泛传播和应用的主要原因;

　　图1

　　图2

　　图3

　　在公司项目对按钮进行优化中得出一些经验

　　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属性来实现按钮的文字效果;

　　6、图3这种背景一般用在新闻列表中，实际应用的时候列表的行高往往比背景中的序号要大，所以在背景合并图片中间距应该比一般按钮要大些，这样在页面中就不会将多余的按钮给显示出来;

　　文章来源：http://www.cnblogs.com/huashengjam/archive/2009/08/25/1553404.html

（编辑：核心网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!