CSS Sprite雪碧图应用 - 侠奕

　　在写网页过程中，会遇到这种需要使用多个小图标:

　　

　　如上图中的「女装」文字左边的图标。容易想到的解决方法是为每张图片加入标签，但这样做会增加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工具查看)。

　　就是这么个简单的问题，但我之前出于两点理解失误始终理解不了为什么像素值是负数。比如一个无序列表

中每一项的
• 都设置背景图片为这个大图片，当显示的时候，就像在一张完整的图片每个区域开个洞，各自看这张大图的局部，我这样理解就解释不了两个
• 怎么都显示一样的小图片。我之所以有这样的理解是因为我忽略了每个li独自拥有这张大图，然后再移动这张大图，想显示哪个区域就显示哪个区域。再，为什么像素值是负数呢？我网上搜，发现也有不理解的网友认为直接把这个像素值为负数记住就行，有网友认为是div顶点动，图片不动，但也解释不通。后来查到的两句话点醒了我：

  • 怎么说呢，图片定位技术，实际上相当于开了一个窗户，你透过窗户看外面的景色。你的窗户大小是不会变的，但是景色却能改变位置，整张雪碧图，就是一个大的风景，通过控制他的定位，你就可以看到不同的风景，所以，可以先做适合大小的图片，然后再整合到一起去，通过负定位进行上移或左移，达到能让这个窗户显示自己正确背景的位置。
  • 以图片左上角为原点，整张图片向左和向上移为负，整张图片向右和向下移为正。

  　　有错误之处，还请指正。

  　　参考资料：

  　　W3C CSS背景属性

  　　显示切图的一部分作为背景显示

  　　CSS sprite在线工具

  　　本文Demo下载:

  　　模仿淘宝导航条（提取码：e0f5）　

   

  分隔线

  background-position属性

  　　1.在使用关键字和百分比值的情况下，设定的值同时应用于元素和背景图片。换句话说，如果设定了33% 33%，则图片水平33%的位置与元素水平33%的位置对齐。垂直方面也一样。例如，background-position:center center;设定图片中心点与元素中心点重合，然后再向各个方向重复。（把一张图片放好，再在水平和垂直方向上重复。）

  　　2.像素之类的绝对单位数值就不一样了。要是用像素单位来设定位置，那么图片的左上角会被放在距离元素左上角指定位置的地方。

  　　3.有意思的是，还可以使用负值。这样就可以把图片的左上角定位到元素外部，从而在元素中只能看到部分图片。