如上图中的「女装」文字左边的图标。容易想到的解决方法是为每张图片加入标签，但这样做会增加HTTP请求数量，影响网站加载速度。比这更优的解决方案是：雪碧图sprite。
所谓雪碧图就是把我们所需要的所有小图片用CSS sprite或者PS工具拼接成一张大图片，然后通过元素的background-image、background-positon属性完成图片的定位。
为此，我做了个Demo。
在学习的过程中，遇到了背景图片定位的问题，也就是background-position属性使用以及如何在这张大图片中定位到要显示的小图标。
问题简化就是：
答案是把这张图片设置为div的背景图。然后移动图片使图片3在div区域显示。
假设4张小图大小一样，都是25x25像素，div也是25x25像素。因为把大图片设置为div的背景图时，默认图片的左上角顶点是与div区域的顶点重合的，所以要将「小图片3」向上垂直移动，水平方向保持不变。因此设置background-position:0px,-25px;(图片像素的定位可用CSS sprite工具查看)。
就是这么个简单的问题，但我之前出于两点理解失误始终理解不了为什么像素值是负数。比如一个无序列表中每一项的
有错误之处，还请指正。
参考资料：
W3C CSS背景属性
显示切图的一部分作为背景显示
CSS sprite在线工具
本文Demo下载:
模仿淘宝导航条（提取码：e0f5）
下载本文
