软件下载 | 资讯教程 | 最近更新 | 下载排行 | 一键转帖 | 发布投稿
您的位置:最火下载站 > Web前端 > Html/css > CSS Sprites技术的实际应用(图)

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

    相关阅读
    栏目导航
    推荐软件