您当前的位置是:首页-CSS+DIV教程

高级技巧:css sprites技术

【发表于】:2011/7/9 23:14:00  已被访问:228次
也就是通过背景图的定位(background-position )把页面中所用到的图标、背景图之类的整合到一张整的背景图里,从而大大减少了页面请求数,提高了页面浏览的性能。
  其实本民工最初这样用的时候并不知这就叫css sprites,只是看到各大主流站都是这么做于是也效仿而已。比如下面这张图,是腾讯主站背景图的一部分:

定位的样式其实只用一句:
background: url("your_url.gif") no-repeat x y;
如: background: url("logo.png"") no-repeat 100px 200px;
  关于CSS中的坐标,图片的最左上角为(0,0),而定位图片内部的位标的话,x、y都是负值。还有,可以把需要repeat的跟no-repeat的图分开,如果放在一起的话那么就需要考虑一下图片的延展性就可以了。
  实现css sprites并不难,只要有点耐心与细心就可以了。在制图的时候建议用Fireworks,他可以把图片精确定位到某个坐标,这是PS做不到的。采用css sprites对页面性能的提升是毋庸置疑的,只是在后期的修改与维护上麻烦了点而已,具体怎么用,可以跟据项目的具体情况来决定了。比如说,本民工的博客就没这样用,因为跟本就没用到几张图片
 
上下篇: CSS Sprites技术以及图片优化 图示divcss帮助初学者的十种技巧和对Web标准的理解

最新推荐信息