CSS Sprite雪碧图应用

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

　　

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

　　就是这么个简单的问题，但我以前出于两点理解失误始终理解不了为何像素值是负数。好比一个无序列表<ul>中每一项的<li>都设置背景图片为这个大图片，当显示的时候，就像在一张完整的图片每一个区域开个洞，各自看这张大图的局部，我这样理解就解释不了两个<li>怎么都显示同样的小图片。我之因此有这样的理解是由于我忽略了每一个li独自拥有这张大图，而后再移动这张大图，想显示哪一个区域就显示哪一个区域。再，为何像素值是负数呢？我网上搜，发现也有不理解的网友认为直接把这个像素值为负数记住就行，有网友认为是div顶点动，图片不动，但也解释不通。后来查到的两句话点醒了我：

• 怎么说呢，图片定位技术，实际上至关于开了一个窗户，你透过窗户看外面的景色。你的窗户大小是不会变的，可是景色却能改变位置，整张雪碧图，就是一个大的风景，经过控制他的定位，你就能够看到不一样的风景，因此，能够先作适合大小的图片，而后再整合到一块儿去，经过负定位进行上移或左移，达到能让这个窗户显示本身正确背景的位置。
• 以图片左上角为原点，整张图片向左和向上移为负，整张图片向右和向下移为正。

　　有错误之处，还请指正。

　　参考资料：

　　W3C CSS背景属性

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

　　CSS sprite在线工具

　　本文Demo下载:

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

 

分隔线

background-position属性

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

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

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