首先看下面的 CSS 代码:
li#nav-home a { background:url(../images/navs.png) no-repeat; }
li#nav-about a { background:url(../images/navs.png) 0 -28px no-repeat; }
li#nav-work a { background:url(../images/navs.png) 0 -56px no-repeat; }
li#nav-services a { background:url(../images/navs.png) 0 -84px no-repeat; }
li#nav-contact a { background:url(../images/navs.png) 0 -112px no-repeat; }
li#nav-home a:hover { background:url(../images/navs.png) 0 -13px no-repeat; }
li#nav-about a:hover { background:url(../images/navs.png) 0 -41px no-repeat; }
li#nav-work a:hover { background:url(../images/navs.png) 0 -69px no-repeat; }
li#nav-services a:hover { background:url(../images/navs.png) 0 -97px no-repeat; }
li#nav-contact a:hover { background:url(../images/navs.png) 0 -125px no-repeat; }
li#nav-home a.active { background:url(../images/navs.png) 0 -13px no-repeat; }
li#nav-about a.active { background:url(../images/navs.png) 0 -41px no-repeat; }
li#nav-work a.active { background:url(../images/navs.png) 0 -69px no-repeat; }
li#nav-services a.active { background:url(../images/navs.png) 0 -97px no-repeat; }
li#nav-contact a.active { background:url(../images/navs.png) 0 -125px no-repeat; }
是不是看的眼花缭乱,不知所云,其实这段css很简单,就是实现所谓的 CSS Sprite 技术。
Why
利用CSS Sprites能很好地减少了网页的http请求,从而大大的提高了页面的性能。
传统的CSS结构,客户端每显示一张图片都会向服务器发送请求,所以,图片越多请求次数越多,造成延迟的可能性也就越大。
而 CSS Sprite 允许你将一个页面涉及到的所有零星图片都包含到一张大图中去,这样一来,当访问该页面时,只需要一次加载这个大图即可。
运用场景:
1. 图片限制
典型如文本编辑器,小图标特别多,打开时一张张跑出来,给用户的感觉很不好。如果能用一张图解决,则不会有这个问题。
2. 单图转滚(这就是前面那一大段CSS的用处)
触发切换图片的需求,传统方案得重新请求新图片,因为网络问题经常造成停留或等待。如果能把多种状态合并成一张图,就能完美解决。
3. 延长背景
如果图片的某边可以背景平铺无限延长,则不需要每个角、每条边单独搞出来,图片能少一个就少一个。其实,这个理论还可以扩展到四角容器里,好处是能大大简化HTML Structure。
How
CSS Sprite 其实就是 利用CSS的“background-image”,“background- repeat”,“background-position”的组合进行背景定位,background-position可以用数字能精确的定位出背景图片的位置。
background:url(../images/navs.png) 0 -13px no-repeat;
Notice
使用 CSS Sprite 要注意一点,IE6下偏移的位置于其他的浏览器不一致,可能需要单独为其设定不同的值,这个问题我遇到好几次了,只能说IE6太变态,连个背景图片的位置都跟别人不一样。
查看Demo,请点击这里