CSS 技巧之一 CSS Sprite

 

首先看下面的 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，请点击这里